0

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

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

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

我的代码：

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仍然不起作用？

感谢所有的帮助。

4

4 回答 4

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');
});
于 2013-09-16T10:42:10.987 回答
0

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

尝试这个

 $(document).on('click','div[text_original="Create New Project"]',function() {
   alert('click');
});
于 2013-09-16T10:42:09.353 回答
0

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

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

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

});

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

更多关于 jquery 页面的信息在这里

于 2013-09-16T10:42:20.897 回答
0

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

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

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

于 2013-09-16T10:43:09.127 回答