点击检测文档's添加的元素

Click detection on document's added element

本文关键字：添加 元素 检测 文档      更新时间：2023-09-26

我目前正在我的页面脚本中使用它的一个元素添加并单击不同的元素，如文本、div和图像。

一开始，使用jQuery-hide方法隐藏所有内容，并且只显示一个输入。如果一切都是正确的，那么剩下的就显示出来了——现在你可以添加新的元素了。在我的html文档中，我使用的方法如下：

$(document).ready(function() {
          hideUnused();
          $('#file_upload').uploadify({
            //all stuff from uploadify <- not important now
          })
          document.onclick = function (evt) {
            ClickDocument(evt); //<- important now
           };})

它一开始对页面上的所有内容都很有效，但当我添加新元素（简单地附加子方法）时，看起来它们不在ClickDocument方法看到的DOM树中。

它是ClickDocument方法：

function ClickDocument(e){
    e = e || event;   
    var target = e.target || e.srcElement;
    alert(target.nodeName);
    return;
}

只测试它非常简单。有人知道我能用它做什么吗？

哦，我忘了提到一件事——我一直在测试现场活动http://api.jquery.com/live/但这不符合我的期望。它不适用于显示/隐藏方法。

非常感谢您的关注和帮助。

编辑：

有人建议我用两种不同的方式使用.delegate()方法。两者都将原来的html代码从$(document).ready(function()进入$("body").delegate(".kElement","click", function(evt){作为我的类元素，我希望在单击时有额外的操作是kElement。所以第一个看起来是这样的：

$("body").delegate(".kElement","click", function(evt){
               e = evt || event;   
                var target = e.target || e.srcElement;
                alert(target.nodeName);
           })

第二个看起来是这样的：

$("body").delegate(".kElement","click", function(evt){
               ClickDocument(evt);                
           })

因此，当我点击我的对象时，它应该显示警报，但它没有。我做错了什么？

如果以后要向页面添加元素，并且需要事件才能工作，则需要使用事件委派。简而言之，这意味着将一个事件附加到元素集合的父级，然后检查是否有任何子级被单击。

例如

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

我可以使用jQuery中的.on（）方法将事件附加到所有子元素

$('.parent').on('click', '.child', function(event){
    // Do something here
})

.on（）和.of（）方法是处理jQuery中事件的较新且首选的方法（因为您也可以分配正常事件），但如果您使用的是旧版本的jQuery，则需要delegate（）方法。

避免使用.live（），因为它的性能不如.delete（），并且存在链接问题（以及被弃用）。

在附加/绑定点击事件时，请使用.live()而不是.bind()

.live()将确保该事件也适用于未来的所有元素。

相关文章：