Solved

Jquery issue accessing HTML object

Posted on 2014-09-26
5
242 Views
Last Modified: 2014-09-26
Hello,

I would like to have a function execute when the user clicks on a hyperlink, but I think I am somehow not getting the right object as the function never gets called.  Here is a snippet of the HTML:

<div id="menuitem2" class="menuitem">
<div id="mainMenu">
| 
<a id="1Menuitem" class="langmenu">Sommaire</a>
 | 
<a id="2Menuitem" class="langmenu">Le carreaux</a>
 | 
<a id="3Menuitem" class="langmenu">Le contenu</a>
 | 
<a id="4Menuitem" class="langmenu">Le panneau de Filtrage</a>
 |
</div>
</div>

Open in new window


And here is the function call:

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

});	

Open in new window


There is a "menuitem1" id, so I would like to target the a.langmenu inside of the div mainMenu.

Any help would be much appreciated.

Cheers,
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
  • 3
5 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40345818
test page : http://jsfiddle.net/3t24sbg5/

wait for page load using :
$(document).(ready(function() {
    // code inside to run once the skeletton of the page is loaded
});
or
$(window).load(function() {
   // code inside to run once all elements of the page are fully loaded
});
0
 

Expert Comment

by:pradeep sain
ID: 40345819
You should call the on click event on document.ready function like this


<html>

<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
$(document).ready(function(){    
$("#mainMenu a.langmenu").on('click', function(e){
		alert("here");
		e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id")); 

});	
});
</script>
</head>

<body>
<div id="menuitem2" class="menuitem">
<div id="mainMenu">
| 
<a id="1Menuitem" class="langmenu">Sommaire</a>
 | 
<a id="2Menuitem" class="langmenu">Le carreaux</a>
 | 
<a id="3Menuitem" class="langmenu">Le contenu</a>
 | 
<a id="4Menuitem" class="langmenu">Le panneau de Filtrage</a>
 |
</div>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:1Cougar
ID: 40345827
Hello and thank you for responding so quickly.

Well, this code works but only with the line "alert("document ready");"  If I take this line out then I do not get the alert "here".  If I keep it in then I get the alert "document ready" and the alert "here".

$(document).ready(function() {
	alert("document ready");

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

});	
						  });

Open in new window

0
 

Author Comment

by:1Cougar
ID: 40345837
OK, I moved the code and it works now.  I was building dynamic innerHTML so maybe that was the issue.

Thanks and cheers!
0
 

Author Comment

by:1Cougar
ID: 40345852
I take that back...actually I do have the same problem...when I remove the alert "document ready" I no longer have the alert "here".

??
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 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