event.target.id not working on firefox

Question

I have a simple click function that does work fine on IE and Chrome but not on firefox. at first, it did not work at all till I put it inside doc.ready function. this example here works but on firefox it only displays the doc ready alert, and clickworking alert when clicked but no alert or action having to do with event.target.id

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <p class="clickbtn" id="someclickbtn"> Click here </p> <script type='text/javascript'> $(document).ready(function(){ alert("doc ready"); $(".clickbtn").click(function() { alert("clickworking"); alert(event.target.id); var targetid = "#" + event.target.id + "scroll"; alert(targetid); $('html, body').animate({ scrollTop: $(targetid).offset().top }, 1000); }) }); </script>

Any help is greatly appreciated, thank you in advance

Answer 1

In firefox, you have to receive event object in your event handler,

$(".clickbtn").click(function(event) {

Chrome will not expect it to be received. But it is always good to receive it in your event handler.

Answer 2

You need to add the event object as function's param.

This is the line:

$(".clickbtn").click(function(event) {

And here is the snippet:

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <p class="clickbtn" id="someclickbtn"> Click here </p> <script type='text/javascript'> $(document).ready(function(){ alert("doc ready"); $(".clickbtn").click(function(event) { alert("clickworking"); alert(event.target.id); var targetid = "#" + event.target.id + "scroll"; alert(targetid); $('html, body').animate({ scrollTop: $(targetid).offset().top }, 1000); }) }); </script>