Question

如果标题不够描述，问题是：

我在页面上有一个元素，一个按钮，一旦点击就会将HTML注入另一个元素。在添加的HTML中，div.text_original="Create New Project"是一个需要触发灯箱的锚点（查看FancyBox），但是，我似乎无法将自定义事件附加到此锚点。

我无法修改触发初始HTML添加的JavaScript，而jQuery中的.on()函数对我不起作用。

我的代码：

jQuery(document).ready(function ($) {

   $('div[text_original="Create New Project"]').on('click', function() {
       alert('click');
   });

});

选择器div[text_original="Create New Project"]只有在用户点击按钮以使用一组菜单项填充空div（在第一次加载时）时才“可访问”，每个项目由div包装并包含名为text_original的属性具有唯一值，因此我将其用作我的选择器。

在用户点击按钮后，如何在不修改构建div元素集合的JS的情况下附加？

如上所述，.on()在这种情况下不起作用。

更新

谢谢大家，我理解这背后的前提，但是，我仍然无法让这个工作。

点击按钮前的结构：

span[button]
   span

用户点击span[button]，DOM看起来像这样：

span[button]
   span
   div[new element]
      div
         ul
          li
           div
             a[what i need to bind to]

我的选择器是否应包含完整的遍历？因为只绑定到div[] a仍然无效？

感谢您的帮助。

Answer 1

.on()的事件委托模型具有不同的语法，事件应该注册到静态元素，动态元素的选择器必须作为第二个参数传递

jQuery(document).ready(function ($) {
   $(document).on('click', 'div[text_original="Create New Project"]', function() {
       alert('click');
   });
});

您使用的语法与

相同

$('div[text_original="Create New Project"]').click(function() {
    alert('click');
});

Answer 2

在这种情况下你没有正确使用on() .. 你需要将它委托给最近的静态父 ..

试试这个

 $(document).on('click','div[text_original="Create New Project"]',function() {
   alert('click');
});

Answer 3

您正尝试将事件附加到触发就绪事件时尚不存在的元素。

jQuery(document).ready(function ($) {

   $('#existingelement').on( 'click', 'div[text_original="Create New Project"]'), function() {
       alert('click');
   });

});

将其附加到动态创建的元素的特定祖先上比将其附加到文档稍好一些。这是因为jQuery必须检查冒泡到文档的所有事件是否要触发事件处理程序。

有关jquery页面here

的更多信息

Answer 4

您需要使用委托的事件处理程序，如下所示：

$(document).on('click', 'div[text_original="Create New Project"]', function() {
   alert('click');
});

请注意，我的示例中的document应该更改为页面中div的最近元素，该元素在加载时可用 - 通常这是要附加到的元素。

附加事件到选择器，由另一个事件添加

4 个答案: