Solved

Jquery issue accessing HTML object - Part II

Posted on 2014-09-26
11
183 Views
Last Modified: 2014-09-26
Hello,

This is a continuation to my previous question as I realized my issue is not solved.  This is HTML:

<div id="menuitem1" class="menuitem">
<div id="mainMenu">
| 
<a id="1Menuitem" class="langmenu">Overview</a>
 | 
<a id="2Menuitem" class="langmenu">The Tile</a>
 | 
<a id="3Menuitem" class="langmenu">The Content</a>
 | 
<a id="4Menuitem" class="langmenu">The Filter Panel</a>
 |
</div>
</div>

Open in new window


This code works (alert("here") gets called):

$(document).ready(function() { 
		alert("ready");
						
	$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
						

});

Open in new window


But, this code (taking out the alert("ready");) does not work, the alert "here" never gets called....

$(document).ready(function() { 
		//alert("ready");
						
	$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
						

});

Open in new window


Just can't figure out what is going on.....

Thanks again!
0
Comment
Question by:1Cougar
  • 5
  • 4
  • 2
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40345919
look fine for me here : http://jsfiddle.net/00ppc0qe/1/

could you share a link to your page?
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40345921
Hi,

There must be something else going on that we're not seeing... I created a Fiddle at http://jsfiddle.net/webdevem/y0wxau30/ which works with both versions of your javascript.  When I click on any of the links, I still get an alert that says "here".  I've tested this in Chrome for Mac and IE11 for Windows.  ( I also used versions of jQuery from 1.6.4 up to 2.1.0)

Can you tell us more about when this happens, or possibly post a link to the site?  (Posting a link to the site would help more, but I realize this isn't always possible.)

WebDevEM
0
 

Author Comment

by:1Cougar
ID: 40346200
I have sent you each a private message with a link....

Thanks again!
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 82

Expert Comment

by:leakim971
ID: 40346209
you've a typo in the code, see line 12 :

$(document).ready(function() { 
	//alert("document ready");
						
	$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
						
d <------------here
});
}

Open in new window

0
 

Author Comment

by:1Cougar
ID: 40346219
Yes, I deleted extra commented out code...thanks for pointing this out...but it still doesn't work for me...

??
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40346248
you're creating the menu with ajax, so put the code line 4 to 8 after generating the menu, inside the callback function of your ajax call.

else just replace :
$("#mainMenu a.langmenu").click(function(e){
by :
$(document).on("click", "#mainMenu a.langmenu", function(e){
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 40346253
else the first solution :
$.getJSON( url1, function(result1) {

	$.each(result1.rows, function(m,val){
								  var thesemenus =[];
								var $div2 = $('<div/>').appendTo("."+$.trim(result1.rows[m].abbr));
								$div2.attr('id', 'menuitem'+result1.rows[m].id);
								$div2.attr('class', 'menuitem');
								var thismenu = '<div id="mainMenu">|';
		$.each(result1.rows[m].data, function(n,val){
				//alert(tmpItem[m].data[n].text);
				
    	thismenu = thismenu+'&nbsp;<a id="'+result1.rows[m].data[n].textboxID+'Menuitem" class="langmenu">'+result1.rows[m].data[n].text+'</a>&nbsp;|';
	
	

		});
		 thismenu = thismenu + '</div>';
		thesemenus.push(thismenu);
//alert(result1.rows[m].id);
$(thesemenus.join("")).appendTo("#menuitem"+result1.rows[m].id);	
		});	

// PUT THE CODE HERE :
$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});
// END	 	


						 
});

Open in new window

0
 

Author Comment

by:1Cougar
ID: 40346254
Thanks, that worked.  But, why does this work $(document).on("click", "#mainMenu a.langmenu", function(e){  and not the other code?  Can you explain the difference so I know for the future?

Thanks,
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40346257
I see that spin.js is not loading, but that shouldn't cause the error you're seeing.  I need to go into a meeting in a few minutes, but my hunch is that there's a problem with the nesting of other { } sets around the code in question.  I went into the Developer Tools in Chrome and ran this manually:
$("#mainMenu a.langmenu").click(function(e){
	alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	

Open in new window

After that, clicking on the menu gave me the alerts as expected.  That tells me the code wasn't being run during the page load.  When I get out of the meeting I'll see if I can narrow down the nesting issue.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 40346270
you create the menu after setting the event, you  cant attach event to non existing element
here : $(document).on("click"
you attach the click event to the document itself, and once the user click on the document, anywhere, jQuery will check if it's on the menu

Check here if you want to learn more :
http://api.jquery.com/on/#direct-and-delegated-events
0
 

Author Comment

by:1Cougar
ID: 40346278
Thanks leakim971!  I will check it out!

Cheers,
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question