在动态创建的元素上返回false [英] return false on dynamically created element

问题描述

我试图阻止动态创建的元素的事件。

我尝试了几种方式，但没有工作。

在deafult上，点击包含课程的div打开一个菜单，我想禁用。

这是我的代码注意我使用的是jQuery 1.6.4，所以我无法使用on方法）。

  $（ function（）{
 $（document）.delegate（span.highlight_mkt，click，function（）{
 return false; 
}）; 
}）; 
  

我已经尝试过使用live方法，但没有任何成功。

任何帮助将不胜感激。

解决方案

您的HTML表单中包含highlight_mkt类，并使用选择器或文档附加点击事件。而您正在使用Ajax加载或动态创建具有相同类名称的其他跨度。

因此，为了防止动态创建的元素发生事件，您可以使用 .die（） 函数，其中您附加动态创建元素的容器名称如下所示： p>

  $（'container_selector span.highligh_mkt'）。die（'click'）; 
  

在此方法中，单击事件将仅触发未动态附加的元素。
如果我不明白，请澄清您的问题。

您所做的是将事件处理程序附加到文档元素或全局容器使用.live（）jquery函数。所以这不是件好事。我稍后会解释。

  $（'body'）live（'click'，'span.hihligh_mkt'，function（e）{
 //你的代码在这里，这是做一些很酷的工作人员，我相信:) 
}）; 
  

但是，如果您只想阻止动态创建的元素，请执行以下操作：

  $（'body'）。live（'click'，'span.some_class'，function（e）{
 
 / /这部分是为了检查它动态附加的天气
 //或它是预定义的html对象
 if（$（e.target）.closest（'＃some_container'）。length == 0）
 {
 //你的代码在这里，这是一些很酷的工作人员，我相信:) 
} 
}）; 
  

所以在上面你会检查，事件整流元素是否动态附加到容器元素，或者是部分原始html。当然，这样一种方法可以避免，如果您将使用将在DOM准备就绪时单独附加到元素的事件。

  $（'span.hihligh_mkt'）。live（'click'，funtion（e）{}）; 
  

在这种情况下，只有在DOM中存在的元素才会得到处理程序。其他动态附加元素将不具有事件处理程序。除非你没有深入克隆跨度元素。

另外一件事情是将事件处理程序附加到正文或其他根元素时，它给您的性能缓慢。您可以阅读这里。

由于所有.live（）事件都附在文档元素上，事件
处理之前最长和最慢的路径。

你可以在这里看到一些例子。

I'm trying to prevent an event on dynamically created elements.
I tried several ways but none worked.

On deafult, a click on the div containing the class opens a menu, and I want to disable that.
This is my code (please note I'm using jQuery 1.6.4 so I'm not able to use the "on" method).

    $(function() {
    $( document ).delegate( "span.highlight_mkt", "click", function() {
        return false;
    }); 
}); 

I have tried this using the "live" method as well but without any success.

Any help would be much appreciated.

解决方案

What I understand from your question is you have span with highlight_mkt class in your html form with click event attached using selector or document. And you are loading using Ajax or dynamically creating other span with same class name.

So in order to prevent events on your dynamically created elements you can use .die() function with container name where you are attaching dynamically created elements as following:

$('container_selector span.highligh_mkt').die('click');

In this method click event will be fired only your elements which is not attached dynamically. If I understand you incorrectly please clarify your question.

What you did is you are attached event handler to document element or global container using .live() jquery function. So it is not good thing to do. I will explain later.

$('body').live('click','span.hihligh_mkt', function(e){
//Your code here. Which is doing some cool staff i believe :)
});

However if you want to prevent only for dynamically created elements do following:

$('body').live('click', 'span.some_class', function(e){

    // This part is needed in order to check weather it is attached dynamically
    // or it is predefined html objects
    if($(e.target).closest('#some_container').length==0)
    {
      //Your code here. Which is doing some cool staff i believe :) 
    }
});

So in above you will just check, does event fairing element is dynamically attached to container element or it is part original html. Of course this kind of method can be avoided if you will use event which will be attached individually to the the elements like following when DOM ready.

$('span.hihligh_mkt').live('click', funtion(e){});

In this case only elements which was exists in DOM ready will get handlers. Other dynamically attached elements will not have event handlers. Unless you are not doing deep cloning of span elements.

Another thing is here when you attaching event handler to body or other root elements it gives you slow performance. You can read about it here.

Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.

You can see some example here.

这篇关于在动态创建的元素上返回false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！