Question

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

一开始，所有内容都是使用jQuery hide方法隐藏，只显示一个输入。如果everytjing是正确的，则显示其余部分 - 现在您可以添加新元素。在我的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/，但这不符合我的期望。它不适用于show / hide方法。

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

修改

由于我已经被吮吸，我以两种不同的方式使用.delegate()方法。两者都改变了旧的HTML代码 $(document).ready(function() 成 $("body").delegate(".kElement","click", function(evt){作为我想要在click上有额外操作的类元素是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);                
           })

所以当我点击我的对象时它应该显示警告，但事实并非如此。我做错了什么？

Answer 1

如果您要在以后向页面添加元素并要求事件起作用，那么您将需要使用事件委派。简而言之，这意味着将事件附加到元素集合的父元素，然后检查是否已单击任何子元素。

例如

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

我可以将事件附加到所有子元素using the .on() method in jQuery

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

.on（）和.off（）方法是在jQuery中处理事件的更新和首选方法（因为你也可以分配普通事件）但是如果你使用旧版本的jQuery那么你将会{{3 }}

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

Answer 2

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

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

单击检测文档添加的元素

2 个答案: