I'am trying to migrate from jquery 1.7 to 1.10 and the live function do not work anymore.
$("#detail_content").on("click", ".close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
the div.detail_content is loading later via ajax but the close button do not work anymore if i change from .live to .on
I think the delegation is missing.
any idea?
I'am trying to migrate from jquery 1.7 to 1.10 and the live function do not work anymore.
$("#detail_content").on("click", ".close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
the div.detail_content is loading later via ajax but the close button do not work anymore if i change from .live to .on
I think the delegation is missing.
any idea?
Share Improve this question asked Jun 6, 2013 at 11:39 hamburgerhamburger 1,4454 gold badges21 silver badges42 bronze badges 2- possible duplicate of jQuery: how to replace .live with .on? – VisioN Commented Jun 6, 2013 at 11:46
- it is not duplicated. the syntax is ok. In this case is the missing static parent the subject. – hamburger Commented Jun 6, 2013 at 12:08
4 Answers
Reset to default 4Looks like #detail_content also is an dynamic one, then try
$(document).on("click", "#detail_content .close", function (a) { // is ignored
//$("#detail_content .close").live("click", function (a) { //works fine with migrate
console.log("click");
});
You should use any closest static parent element (or body at last):
$("body").on("click", "#detail_content .close", function() { ... });
So if you have the markup like:
<body>
...
<div id="container">
...
<div id="detail_content"><button class="close">Close</button></div>
</div>
</body>
and #container is not replaced after Ajax call, then it is better to use:
$("#container").on("click", "#detail_content .close", function() { ... });
The .live() method is deprecated in jQuery 1.10 and above. Use .on() method to attach event handlers.
So you can use this code instead of .live()
$(document).on('click', '#detail_content .close', function(){
//your Code
});
I think this answer is useful for you and in this page you can see all deprecated method and it's useful for someone who want to migration from 1.7 to 1.10
VisioN, is it not the same to just use the following?
$(document).ready(function(){
$(".close").click(function(){
console.log("clicked");
}
});
Is there something about the code above that is slower or less efficient somehow?