Question

我有一个函数可以创建一个带有removeme类的span元素并将其插入到DOM中。我还将一个click事件附加到具有removeme类的所有跨度，该类应该删除在上一步中创建的跨度。这不起作用。点击事件未触发，并且未删除范围。

$('.createtext').click(function(){   
    $('<span class="removeme">Remove text</span>').appendTo($('#a1'));        
});

$('.removeme').click(function(){
    $('.removeme').remove();
});

我在这里有一个例子：http://jsfiddle.net/aagQE/

Answer 1

使用事件委托：

$('.removeme').live("click", function(){
    $(this).remove();
});

或（更好）：

$('#a1').delegate(".removeme", "click", function(){
    $(this).remove();
});

参考：

Answer 2

因为当您挂钩处理程序时，该元素不存在。代码

$('.removeme').click(...);

...查找然后存在的匹配元素并将这些元素挂钩。由于您之后正在创建元素，因此在进行连接时它不存在。

在创建元素时连接元素（不是很理想），或者使用事件委托：

您可以通过delegate或其全球表兄live使用事件委派（另请参阅下面的新语法）：

// delegate (preferred, see also newer syntax below)
$("#a1").delegate(".removeme", "click", function() {
    // ...
});

// live (not ideal, works all the way out at the document level)
$(".removeme").live("click", function() {
    // ...
});

从jQuery 1.7开始，您可以使用新的on函数，该函数统一了所有各种形式的事件连接（直接和委托）：

// New syntax
$("#a1").on("click", ".removeme", function() {
    // ...
});

请注意，参数的顺序与delegate略有不同。

delegate和on实际上正在做的是挂起容器元素上的click事件（在您的情况下为#a1），然后当点击达到该值时在元素中，它们查看从实际最底层元素实际点击（event.target）到容器的路径，看它们是否与选择器匹配。如果是这样，jQuery将使用this引用匹配的元素而不是#a1来触发事件处理程序。

Answer 3

您需要使用jQuery的.live()方法绑定到动态创建的元素上的事件：

$('.removeme').live("click", (function(){
    $(this).remove();
});

作为替代方案，如果您使用的是jQuery 1.7，则可以使用.on()方法：

$(".removeme").on("click", function(event){
    $(this)remove();
});

Answer 4

我意识到这不是你的实际问题但是，你知道你能做到这一点吗？

$('.createtext').click(function(){   
    $('<span class="removeme">Remove text</span>')
        .click(function(){
            $(this).remove();
        })
        .appendTo($('#a1'));        
});

Answer 5

您可以使用JQuery live函数来访问页面初始加载时不存在的DOM元素。

e.g。

$('.createtext').live('click', function(){   
   $('<span class="removeme">Remove text</span>').appendTo($('#a1'));        
});

脚本未检测到单击“创建的元素”

5 个答案: