Geek Answers Handbook

JQuery event does not fire

I have 3 files:

  • js_json.js -> for my json code
  • javascript.js -> for my javascript function
  • index.php

Here is the code for js_json.js :

 $(function(){ $('#postTitle').change(function(){ var title_id = $("#postTitle").val(); $.ajax({ type:"post", url:"proses.php", data:"title_id=" + title_id, dataType:"json", success:function(data){ body=""; //$.each(data, function(i,n){ //body = n['body']; //}); body += "<a href=\"javascript:void(0);\" id=\"pesan\" name="pesan" onClick=\"\">Hola Test</a>"; $(".postBody").empty(); $(".postBody").append(body); }, error:function(data){ $(".postBody").empty(); $(".postBody").append("NO Post Selected."); } }); return false; }); });

and here is my javascript.js code:

 $(function (){ $("a[name=pesan]").click(function (){ alert("holalalalalal.....!"); }); });

and here is the index.php code:

  //some code <body> <a href="javascript:void(0);" id="pesan" name="pesan">Hola Test 1</a> Posts : <br /> <select name="title" id="postTitle"> <option value="">Select Post...</option> <?php $sql = "SELECT id, title FROM posts ORDER BY title"; $query = mysql_query($sql) or die(mysql_error()); while($rows = mysql_fetch_array($query)){ print('<option value="' . $rows['id'] . '">' . $rows['title'] . '</option>'); } ?> </select> <br /> Body : <br /> <div class="postBody"> Will show the body of post. </div> </body> </html>

and my question is:

When I click the "Hola Test 1" link, it works and a message appears. The problem is that after I click the "Select" button and the "Hola Test" link appears, and then I click the link ("Hola Test"), the message will not appear and there are no errors in firebug ...

Can someone explain to me why ...? Thanks this ...

+7
source share
2 answers

click() will only bind the event for elements that exist on the page at the time the click called (the same for on() without a selector, bind() and all other methods in the shortcut -group to bind, keydown() , change() and etc.).

Since your other element is added via AJAX after some time, the handler is not associated with it.

Use .on() instead of a selector that will bind the event to all current and future elements matching the selector.

 $(function (){ $(document).on('click', 'a[name=pesan]', function () { alert("holalalalalal.....!"); }); });

Since on() was introduced in jQuery 1.7, if you are using earlier versions of jQuery (for example, those that existed when asking this question), you can use live() or delegate() instead of on;

 $(function (){ $('a[name=pesan]').live('click', function () { alert("holalalalalal.....!"); }); });
+15
source

I want to mention (because I did not mention it in any of the cases of "non-triggered events" that I looked on the Internet), that there is a possibility that can bite you.

If you use . remove () to temporarily remove from the DOM and then paste it again, then you will lose your events. Instead you need to . Detach () to save data and events after re-entering. It can be difficult to debug, because everything can look fine, and event debugging tools are sketchy at best.

(Personally, I would call them something more like .detachAndScrubDataAndEvents () and .detach () , since I'm a fan of descriptive names, saving debugging hours. For those who find .remove () and .detach () as semantically and significantly different names ... the world is with you ... BUT you're flat wrong.)

+1
source

More articles:


All Articles