Menu
I have 3 files:
Here 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 my javascript.js code:
$(function (){
$("a[name=pesan]").click(function (){
alert("holalalalalal.....!");
});
});
and here 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 link "Hola Test 1", it works and the message appears. The problem is, after I click the select option, and the link "Hola Test" appears, and then I click that ("Hola Test") link, the message does not appear and there are no errors in firebug...
Can somebody explain to me why...? Thank's...
478
click() will only bind the event for elements that exist in the page at the time click is called (the same goes for on() without a selector, bind(), and all the other methods in the shortcut-group for bind; keydown(), change() etc. ).
Because your other element is getting added via AJAX some time later, the handler isn't bound for it.
Use .on() with a selector instead, which will bind the event to all current and future elements matched by the selector.
$(function (){
$(document).on('click', 'a[name=pesan]', function () {
alert("holalalalalal.....!");
});
});
Since on() was introduced in jQuery 1.7, if you're using earlier versions of jQuery (like those that existed when this question was asked), you can use live() or delegate() instead of on;
$(function (){
$('a[name=pesan]').live('click', function () {
alert("holalalalalal.....!");
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
