在动态创建的元素上返回 false

Question

我正在尝试阻止动态创建的元素发生事件。
我尝试了几种方法，但都没有奏效。

默认情况下，单击包含该类的 div 会打开一个菜单，我想禁用它。
这是我的代码（请注意我使用的是 jQuery 1.6.4，所以我无法使用“on”方法）。

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

我也尝试过使用“实时”方法，但没有任何成功。

任何帮助将不胜感激。

Answer 1

也许这个链接对你有帮助 -> preventDefault

$(document).delegate("span.highlight_mkt", "click", function (e) {
    e.preventDefault();
    /* your code here */
});

编辑

你也试过了吗？

$('span.highlight_mkt').live("click", function (e) {
    e.preventDefault();
    /* your code here */
});

Answer 2

这应该停止事件传播：

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

Answer 3

我从您的问题中了解到的是，您的 html 表单中的 highlight_mkt 类具有跨度，并使用选择器或文档附加了单击事件。您正在使用 Ajax 加载或动态创建具有相同类名的其他跨度。

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

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

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

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

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

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

$('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 :) 
    }
});

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

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

在这种情况下，只有存在于 DOM 就绪的元素才会获得处理程序。其他动态附加的元素将没有事件处理程序。除非您没有对 span 元素进行深度克隆。

当您将事件处理程序附加到正文或其他根元素时，另一件事会导致性能下降。你可以阅读它here。

由于所有 .live() 事件都附加在文档元素上，因此事件 在处理它们之前采取最长和最慢的路径。

You can see some example here.