jquery - 我们可以使用 jQuery `on` 来静态创建 DOM 元素吗？ on(event,selector,function) 和 on(event,function) 之间有什么区别

Question

我们可以使用 jQuery on 来静态创建 DOM 元素而不是 jQuery 点击(我知道这会起作用，但我想知道它好用吗？)

这有什么不同

$('body').on('click', '#joinSession', function(){}) 和 $('#joinSession').on('click ', function() {})

我创建了jsfiddle两种方法都给出相同的结果，这之间有什么显着差异？

HTML

<div class="container">
    <div class="controls">
        <input type="button" value="Create session" id="createSession"/>
        <input type="button" value="Join session" id="joinSession"/>
    </div>
    <div class="othersVideos"></div>
    <div class="ownVideo"></div>
</div>

Jquery 脚本

$('#createSession').on('click', function() {
    alert('test');
});

$('body').on('click', '#joinSession', function() {
    alert('testing')
});

Answer 1

$('#createSession').on('click', function() {
    alert('test');
});

这会将点击处理程序直接绑定(bind)到与选择器匹配的任何元素。如果在调用绑定(bind)时没有找到任何元素，它将不执行任何操作。

$('body').on('click', '#joinSession', function() {
    alert('testing')
});

这使用事件委托(delegate)并将点击处理程序绑定(bind)到body。每当事件冒泡到 body 时，jQuery 就会检查事件的起源位置。如果它源自与第二个参数选择器匹配的内容，它将触发处理程序。这使得事件能够绑定(bind)到可能尚不存在的元素 - 只要它们在事件触发时存在，处理程序仍将应用于它们。

几乎应该始终使用第二种语法，因为它具有性能和内存优势。为了获得最佳结果，您应该使用尽可能快 (id) 且靠近元素的选择器，而不是 body。有关事件委托(delegate)的更多信息，请查看 jqFundamentals .