Solved

Jquery issue accessing HTML object - Part II

Posted on 2014-09-26
11
174 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now