.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

`.on()` requires jQuery v1.7 or above. Which version are you using? — andyb, Jun 06 '12 at 11:25
You did not properly convert your `.live` code to `.on`. **[Please read the documentation](http://api.jquery.com/live/)** and/or **[use the search](http://stackoverflow.com/questions/8021436/jquery-1-7-turning-live-into-on/8021462#)**. — Felix Kling, Jun 06 '12 at 11:28

thecodeparadox · Accepted Answer · 2012-06-06T11:38:14.017

7

$('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()

edited Jun 06 '12 at 11:38

answered Jun 06 '12 at 11:25

thecodeparadox

86,271
21
138
164

can i use on multiple times with body – Jun 06 '12 at 11:26
what if function for div and button are different – Jun 06 '12 at 11:28
@Somebody: The same rules that are valid for any event handler registration methods apply to `.on` as well. – Felix Kling Jun 06 '12 at 11:29
@Somebodyisintrouble then you should go for different binding – thecodeparadox Jun 06 '12 at 11:29
@Somebodyisintrouble no, no. Don't use live event – thecodeparadox Jun 06 '12 at 11:37

.on() not working on ajax loaded page

1 Answers1