Javascript jQuery：在静态和动态创建的元素（委托事件）上执行操作

当我加载页面时，我在一个名为

#files\u container

的容器中有一些带有特定类的“静态”HTML标记，名为

.file\u item

。稍后，在同一页面上，我将通过Ajax new

.file\u item

添加（预加）内容，而不刷新。简单的$.ajax-工作正常

我的问题是，然后我想在这些元素上执行单击事件

我知道问题出在哪里-我知道如何解决这个问题，但我发现我的方法非常丑陋。我知道委托事件（）并且我知道触发：

$('.file_item').click(function() {
    // will work on static elements but won't work on "dynamic" elements appended via Ajax.
});

vs

最后，我的问题是：我如何将这两者结合在一起，这样无论当我加载页面或15分钟后通过Ajax追加时是否存在

.file\u项

，括号内的代码都将被执行

编辑：

以下是HTML的外观：

<section id="files_container">
    <section class="file_item">file 1</section>
    <section class="file_item">file 2</section>
    <section class="file_item">file 3</section>
    <section class="file_item">file 4</section>
    <section class="file_item">file 5</section>
</section>

文件1
文件2
文件3
文件4
文件5

其他文件将通过Ajax预先添加

<section id="files_container">
    <section class="file_item">new one injected via prepend by $.ajax</section>
    <section class="file_item">file 1</section>
    <section class="file_item">file 2</section>
    <section class="file_item">file 3</section>
    <section class="file_item">file 4</section>
    <section class="file_item">file 5</section>
</section>

美元.ajax通过prepend注入的新版本
文件1
文件2
文件3
文件4
文件5

我认为问题在于静态元素不是

文件\u容器

元素的后代，这就是委托处理程序不为其工作的原因

因此，解决方案是在静态和动态元素之间找到一个公共父元素，并将委托处理程序绑定到该父元素。由于您尚未共享标记，下面我将处理程序绑定到document对象，该对象应处理这两种情况

$(document).on('click', '.file_item', function() {
    // your code here
});

---

我认为问题在于静态元素不是

files\u container

元素的后代，这就是委托处理程序不为其工作的原因

因此，解决方案是在静态和动态元素之间找到一个公共父元素，并将委托处理程序绑定到该父元素。由于您尚未共享标记，下面我将处理程序绑定到document对象，该对象应处理这两种情况

$(document).on('click', '.file_item', function() {
    // your code here
});

---

我认为问题在于静态元素不是

files\u container

元素的后代，这就是委托处理程序不为其工作的原因

因此，解决方案是在静态和动态元素之间找到一个公共父元素，并将委托处理程序绑定到该父元素。由于您尚未共享标记，下面我将处理程序绑定到document对象，该对象应处理这两种情况

$(document).on('click', '.file_item', function() {
    // your code here
});

---

我认为问题在于静态元素不是

files\u container

元素的后代，这就是委托处理程序不为其工作的原因

因此，解决方案是在静态和动态元素之间找到一个公共父元素，并将委托处理程序绑定到该父元素。由于您尚未共享标记，下面我将处理程序绑定到document对象，该对象应处理这两种情况

$(document).on('click', '.file_item', function() {
    // your code here
});

---

只需使用您提供的第二个代码段。它适用于静态和动态元素。当存在静态和动态元素时，始终委托事件，无需编写两个事件处理程序。如果该代码对您不起作用，那么肯定有其他东西失败了

只需使用您提供的第二个代码段即可。它适用于静态和动态元素。当存在静态和动态元素时，始终委托事件，无需编写两个事件处理程序。如果该代码对您不起作用，那么肯定有其他东西失败了

只需使用您提供的第二个代码段即可。它适用于静态和动态元素。当存在静态和动态元素时，始终委托事件，无需编写两个事件处理程序。如果该代码对您不起作用，那么肯定有其他东西失败了

只需使用您提供的第二个代码段即可。它适用于静态和动态元素。当存在静态和动态元素时，始终委托事件，无需编写两个事件处理程序。如果该代码对您不起作用，那么肯定有其他东西失败了

你好，阿伦，我更新了我的问题，向你展示了标记。没有火箭科学。始终只有一个文件容器，其中包含大量文件项。您绑定到文档的解决方案不起作用。@slick-在这种情况下，您的代码应该可以工作fine@slick你能更新小提琴来重现这个案子吗谢谢你们。确实

on（'click'

对静态和动态都有效。我在JS中有一个不同的部分破坏了我的代码。所有问题都解决了！再次感谢！嗨，阿伦，我更新了我的问题以向您显示标记。没有火箭科学。始终只有一个文件容器包含大量文件项。您绑定到文档的解决方案不起作用。@slick-in这种情况下，您的代码应该可以工作fine@slick你能更新小提琴来重新制作这个箱子吗谢谢你们，真的（'click'对静态和动态都有效。我在JS中有一个不同的部分破坏了我的代码。所有问题都解决了！再次感谢！嗨，阿伦，我更新了我的问题以向您显示标记。没有火箭科学。始终只有一个文件容器包含大量文件项。您绑定到文档的解决方案不起作用。@slick-in这种情况下，您的代码应该可以工作fine@slick你能更新小提琴来重新制作这个箱子吗谢谢你们，真的（'click'对静态和动态都有效。我在JS中有一个不同的部分破坏了我的代码。所有问题都解决了！再次感谢！嗨，阿伦，我更新了我的问题以向您显示标记。没有火箭科学。始终只有一个文件容器包含大量文件项。您绑定到文档的解决方案不起作用。@slick-in这种情况下，您的代码应该可以工作fine@slick你能更新提琴来重新创建这个案例吗谢谢大家。事实上（'click'）上的

on（

）对静态和动态都有效。我在JS中有一个不同的部分破坏了我的代码。所有问题都解决了！再次感谢！