Solved

Jquery issue accessing HTML object - Part II

Posted on 2014-09-26
11
189 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

719 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