我们可以对静态创建的DOM元素使用jQuery`on`吗？on（事件、选择器、函数）、on（事件、函数）之间有什么不同

对于静态创建的DOM元素，我们可以使用jQuery

而不是jQuery吗
单击
（我知道这会起作用，但我想知道它使用起来好吗？）

这两者有什么不同

$（'body'）。在（'click'，'joinSession'，function（）{}）
和
$（'joinSession'）。在（'click'，function（）{}）

我创建的两种方法都给出了相同的结果这两者之间有什么显著的不同

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>

第一个模型将事件直接绑定到元素，此方法的缺点是在执行脚本时必须存在源元素

第二个模型将处理程序绑定到文档体，如果事件源元素的任何祖先/自身的选择器条件为true，它将使用事件传播来触发处理程序。这在处理动态元素时非常有用，因为当执行事件注册码时，目标元素可能不存在于文档中。第一个示例：

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

正在按id查找特定元素。如果该元素在页面上不存在，则不会将单击事件添加到此元素

第二个例子：

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

将click事件绑定到主体，因此，即使绑定click事件时不存在
#joinSession
，您也可以稍后将此元素附加到主体，并且click事件将工作，而无需再次绑定事件。当您有一个动态UI，并且知道某些元素将在以后添加时，这非常有用，但是您只想绑定一次事件，而不必担心每次向文档添加新元素时都会重新绑定

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

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

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

这将使用事件委派并将单击处理程序绑定到
正文
。每当一个事件出现在
正文中时，jQuery将检查事件的起源地。如果它来自与第二个参数选择器匹配的内容，它将触发处理程序。这使得事件可以绑定到可能还不存在的元素——只要它们在事件触发时存在，处理程序仍将应用于它们

第二种语法几乎应该始终使用，因为它具有性能和内存优势。为了获得最佳结果，您应该使用尽可能快（id）且尽可能靠近元素的选择器，而不是
body
。有关事件委派的更多信息，请查看。
您使用（
$（element）.on（'event'，element，function（）{…}）为新创建的元素保留函数

检查这个例子

假设在
#myDiv
div中有几个
.div
s，上面的代码会将事件附加到每个匹配的元素上。假设其中有1000个div？它会将事件附加到1000个不同的元素上

$('#myDiv').on('click', '.div', function() {
    alert('testing')
});

上述操作仅将元素附加到
#myDiv
，并在
#myDiv
上发生
单击事件时触发，但前提是它也在匹配的
.div
元素上。这样，对于
#myDiv
中的1000个div，您只有一个事件处理程序，以防止开销和性能问题。另外，后者将处理动态生成的元素，这些元素是通过AJAX或jQuery本身作为动态元素创建的。
顶部是将单击事件直接绑定到
#createSession
。底部是将单击事件绑定到
body
，但基本上是说“如果单击事件出现在
body
上，则事件目标是
#joinSession
，然后运行此函数。第二个函数用于将事件绑定到动态创建/添加的元素。但要记住：让事件在DOM阶梯上冒泡太多可能会对性能有害。您应该尝试将事件分配到最近的容器，而不是“主体”@PabloMescher我理解，例如，我只给出了代码，我想知道你的答案与我的答案有什么不同question@Thirumalaimurugan这有什么关系？
click（）
只是
on（'click'）
！@Thirumalaimurugan的简写——正如Zenith所说，
click（）
只是内部映射到
on（'click'）
所以可以随意使用。请看这里：出于好奇。“#.div”是什么意思关于将多个处理程序附加到多个元素和性能/开销的额外信息，我一直支持您，直到最后一段-除非必须，否则不应绑定到正文。首选项应始终是在绑定事件处理程序时绑定到最接近的现有容器。“第二种语法几乎应该一直使用"-我不同意这一部分。@Markschultheis使用非委托语法只是调用委托语法，以
body
作为起始选择器，因此如果您可以得到比body更具体的内容，那么您应该使用委托语法。@Markschultheis我认为jbabey说的是正确的，任何方式+1都可以解释这个概念还有你的努力
$('#myDiv').on('click', '.div', function() {
    alert('testing')
});

$('#myDiv').on('click', '.div', function() {
    alert('testing')
});