We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
title: jquery-after-ajax-not-work date: 2016-06-02 23:59:41 tags:
今天和同事写代码的时候遇到一个问题： 使用jquery的选择器绑定click事件的时候，如果将选择器所表示的dom元素通过ajax替换后（和原来的dom结构一样），新的dom元素的click事件不会生效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>before</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script> $(function(){ $("button").click(function(){ var url = "http://www.harrytse.com"; $.get(url, function(d){ var newli = '<li class="ccate">5</li><li class="ccate">6</li><li class="ccate">7</li>'; $("#ccateBox").html(newli); }); }); $(".ccate").click(function(){ alert(".ccate clicked"); }); }); </script> </head> <body> <button type="button">ajax button</button> <br>点击下面的li查看效果 <ul id="ccateBox"> <li class="ccate">1</li> <li class="ccate">2</li> <li class="ccate">3</li> <li class="ccate">4</li> </ul> </body> </html>
可以试一下上面的代码， 当刚开始载入页面之后的时候点击li是会弹出的， 点击ajax button后， 执行替换ul里面的li后， 再点击li是不会弹出的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>before</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script> $(function(){ $("button").click(function(){ var url = "http://www.harrytse.com"; $.get(url, function(d){ var newli = '<li class="ccate">5</li><li class="ccate">6</li><li class="ccate">7</li>'; $("#ccateBox").html(newli); }); }); }); $(document).on("click", ".ccate", function(){ alert(".ccate clicked"); }); </script> </head> <body> <button type="button">ajax button</button> <br>点击下面的li查看效果 <ul id="ccateBox"> <li class="ccate">1</li> <li class="ccate">2</li> <li class="ccate">3</li> <li class="ccate">4</li> </ul> </body> </html>
修改代码后ajax button替换li之后点击仍能弹出。
经过搜索后，才发现是 jquery不会动态更新dom树, 在stackoverflow上找到帖子， 帖子地址。
大致说的是： 页面代码执行后，jq的选择器只会匹配页面中存在的dom元素，并且不会动态更新。 所以当你使用jq的.hover(),.click()等方法时，jq只会添加事件到已经存在且匹配其选择器的元素， 当你用ajax更新并且替换了页面的部分内容时，即使新的元素能匹配那些选择器， 但这些元素不会被添加事件， 因为jq的代码已经执行过了。
ps: 貌似在某论坛看到过jq的这些方法其实内部是用on绑定事件的，哪天去看看jq的源码应该理解更深刻。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
title: jquery-after-ajax-not-work
date: 2016-06-02 23:59:41
tags:
今天和同事写代码的时候遇到一个问题：
使用jquery的选择器绑定click事件的时候，如果将选择器所表示的dom元素通过ajax替换后（和原来的dom结构一样），新的dom元素的click事件不会生效。
原代码
可以试一下上面的代码， 当刚开始载入页面之后的时候点击li是会弹出的， 点击ajax button后， 执行替换ul里面的li后， 再点击li是不会弹出的。
修改后的代码
修改代码后ajax button替换li之后点击仍能弹出。
问题所在
经过搜索后，才发现是 jquery不会动态更新dom树, 在stackoverflow上找到帖子， 帖子地址。
大致说的是： 页面代码执行后，jq的选择器只会匹配页面中存在的dom元素，并且不会动态更新。
所以当你使用jq的.hover(),.click()等方法时，jq只会添加事件到已经存在且匹配其选择器的元素，
当你用ajax更新并且替换了页面的部分内容时，即使新的元素能匹配那些选择器， 但这些元素不会被添加事件， 因为jq的代码已经执行过了。
ps: 貌似在某论坛看到过jq的这些方法其实内部是用on绑定事件的，哪天去看看jq的源码应该理解更深刻。
The text was updated successfully, but these errors were encountered: