Question

当您点击我的链接#addScnt时，会出现一个新的孩子。到目前为止一切正常，但我附加了另一个标签，当你点击它时，应该会发生一些事情，但你可以猜到，没有任何反应......但是当我在我的页面内创建另一个链接时（所以在我的jquery函数之外））我的点击功能有效...所以我不明白那里发生了什么。

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').click(function() {
        $('<p><label for="p_scnts"><input type="file" id="p_scnt" name="p_scnt_' + i +'"></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#remScnt').click(function() {
        alert();
    });

});

我的HTML

 <h2><a href="#" id="addScnt">Ajoutez une nouvelle photo</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="file" id="p_scnt" name="p_scnt">
        </label>
    </p>
</div>

所以，$（＆＃39;＃remScnt＆＃39;）。当我添加另一个孩子时，click（function（）根本不起作用...但是如果我在我的页面上放置了一个id为#remScnt的标签，我的警报会起作用......

Answer 1

这里有两件事......

首先，您似乎正在重新使用id值。如果您要多次将其添加到页面中：

<a href="#" id="remScnt">Remove</a>

然后你有多个具有相同id的元素，这是无效的。所以jQuery选择器（$('#remScnt')）之类的行为是未定义的。（他们可能巧合工作，但它仍然无效且未定义。）相反，请尝试使用类：

<a href="#" class="remScnt">Remove</a>

和

$('.remScnt')

其次，当页面加载时，此处的点击绑定仅发生一次：

$('.remScnt').click(function() {
    // etc.
});

绑定附加到元素，而不是选择器。因此它仅适用于创建绑定时存在的元素。之后添加到页面的元素将不会附加到其点击事件中。

你可以通过delegating the event handler to a common parent, and filtering events based on the selector解决这个问题。 jQuery为此提供了.on()函数：

$(document).on('click', '.remScnt', function() {
    // etc.
});

这样做实际上是绑定到整个文档的click事件，并且只要与提供的选择器匹配的东西调用此类事件，就会响应该事件。简单地说，在这个版本中，{click（1）}选择器在click事件发生时进行评估，而不是在定义事件处理程序时进行评估。

您无需使用'.remScnt'来举办活动，任何普通家长都可以使用。只要不像目标元素那样动态添加/删除该父元素。例如，如果所有目标document元素都位于同一a class="remScnt"，那么您可以将div定位为：

div

Answer 2

您需要确保只使用一次ID，并将事件委托用于动态创建的元素。尝试：

$('#p_scents').on('click', '#remScnt', function() {
    alert();
});

Answer 3

当你附加一个你需要使用的元素时，就像这样，

$('#p_scents').on('click', '#remScnt', function(){
    // Some Stuff
});

追加<a>, my click function doesnt work</a>时

3 个答案: