如何为委托选择器和直接选择器编写更短的事件?
How to write shorter an event for a delegated selector and a direct selector?
有没有更好更简洁的方法来编写这些 jQuery 事件?
$(".class").on("click", function(e){
e.preventDefault();
functionTest();
});
$("#selector").on("click", ".class", function(e){
e.preventDefault();
functionTest();
});
我正在考虑类似下面的事情,但我知道这绝对不是合适的方式:
$("#selector, .class").on("click", ".class", function(e){
e.preventDefault();
functionTest();
});
关于html结构,我有:
<div>
<a href="" class=".class">button</a>
</div>
<div id="#selector">
<!-- Dynamically generated html -->
<a href="" class=".class" id="id1">button</a>
<a href="" class=".class" id="id2">button</a>
<a href="" class=".class" id="id3">button</a>
<!-- Dynamically generated html -->
</div>
假设所有 .class
元素都是 #selector
的子元素,那么您可以使用单个委托事件处理程序:
$("#selector").on("click", ".class", function(e) {
e.preventDefault();
functionTest();
});
如果不是这种情况,那么您可能需要使用两个单独的事件处理程序,就像您的第一个示例一样。
有没有更好更简洁的方法来编写这些 jQuery 事件?
$(".class").on("click", function(e){
e.preventDefault();
functionTest();
});
$("#selector").on("click", ".class", function(e){
e.preventDefault();
functionTest();
});
我正在考虑类似下面的事情,但我知道这绝对不是合适的方式:
$("#selector, .class").on("click", ".class", function(e){
e.preventDefault();
functionTest();
});
关于html结构,我有:
<div>
<a href="" class=".class">button</a>
</div>
<div id="#selector">
<!-- Dynamically generated html -->
<a href="" class=".class" id="id1">button</a>
<a href="" class=".class" id="id2">button</a>
<a href="" class=".class" id="id3">button</a>
<!-- Dynamically generated html -->
</div>
假设所有 .class
元素都是 #selector
的子元素,那么您可以使用单个委托事件处理程序:
$("#selector").on("click", ".class", function(e) {
e.preventDefault();
functionTest();
});
如果不是这种情况,那么您可能需要使用两个单独的事件处理程序,就像您的第一个示例一样。