假设我有一些jQuery代码,它将事件处理程序附加到具有类"myclass"的所有元素.例如:
$(function(){
$(".myclass").click( function() {
// do something
});
});
Run Code Online (Sandbox Code Playgroud)
我的HTML可能如下:
<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>
Run Code Online (Sandbox Code Playgroud)
这没有问题.但是,请考虑是否在将来某个时间将"myclass"元素写入页面.
例如:
<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
$("#anchor1").click( function() {
$("#anchor1").append('<a class="myclass" href="#">test4</a>');
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
在这种情况下,当用户点击#anchor1时会创建"test4"链接.
"test4"链接没有与之关联的click()处理程序,即使它具有class ="myclass".
知道如何解决这个问题吗?
基本上,我想编写一次click()处理程序,并将其应用于页面加载时出现的内容和稍后通过Ajax/DHTML引入的内容.
我习惯使用.click()和delegate('click'),所以当我读到两个都在最近的jQuery版本中被弃用时,我以为我已经阅读了它,但我有点不知所措.
这里的文档似乎表明这是.live()和.delegate()的替代品,但.click ()和.bind()有不同的行为,即绑定到当前存在的对象,其他的绑定到任何与DOM的生命周期相匹配的选择器模式的对象.
在大多数情况下,这不会产生很大的不同,但是当动态地向DOM添加元素时,这是一个重要的区别.与旧模式匹配的新对象不会将侦听器与click事件绑定.click(),但会使用.delegate().
我的问题是,如何使用该.on()方法复制预先存在的.delegate()和.bind()?的行为?或者未来的一切都会走向.delegate()风格?