.on() not working on ajax loaded page

Question

My soft.php code

<!DOCTYPE html>
<html>
<head><style>
</style>
<script src="jquery.js"></script>
<script>
$(function(){
$("button").on("click",function(){alert("f");});
$("div").on("click",function(){
$("span").load("check.php");
});

});</script></head><body>
<div>Click</div>
<button>eaf</button><span></span>
</body></html>

And check.php code

<body>
<button>Hello</button>
</body>

I want to alert f on clicking on button which is loaded via ajax which was working fine with .live(). But someone told me that .on() can be used in place of live but .on() is not working here.Suggest Solution

Answer 1

$('body').on("click", "button", function(){
    alert("f");
});

As your button added to DOM after page load you need to use delegate event.

It would be better to use something other selector instead of body .

You can use multiple selector like follwoing:

$('body').on("click", "button, div", function(){
    alert("f");
});

Read about .on()

.on() not working on ajax loaded page

Question

1 answers

solution1
7 ACCPTED 2012-06-06 11:25:11

.on() not working on ajax loaded page

Question

1 answers

solution1 7 ACCPTED 2012-06-06 11:25:11

solution1
7 ACCPTED 2012-06-06 11:25:11