jquery - 动态添加的链接不起作用

Question

我在尝试在我的脚本上触发事件（警报）时遇到问题。这是html：

<div class="dynamic-form">
    <form>
      <div class="inputs"></div>
      <a href="#" id="add">ADD</a>
      <input name="submit" type="button" class="submit" value="Submit">
    </form>
</div>

和 JS：

$(document).ready(function(){

    var i = 1;

    $('#add').click(function() {
        $('<div id="d' + i + '" class="fielddiv"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><a href="#" id="remove_question">Cancella</a><hr></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });

    $('#remove_question').on("click", function(event) {
        alert('dsfsfd');
        //$('#d' + $this.attr('todel')).remove();
    });


    // here's our click function for when the forms submitted

    $('.submit').click(function(){

        var answers = [];
        $.each($('.field'), function() {
            answers.push($(this).val());
        });

        if(answers.length == 0) {
            answers = "none";
        }  

        alert(answers);

        return false;                     
    });

});

点击功能上的删除问题应该触发警报但没有做任何事情，甚至没有错误，我做错了什么？这也是一个jsfiddle。

Answer 1

您必须具有委托语法。此外，请使用 CLASSES NOT ID，否则您将拥有重复的 ID。

工作JSfiddle：

http://jsfiddle.net/Z6x8X/2/

代码：

$(document).ready(function(){

    var i = 1;

    $('#add').click(function() {
        $('<div id="d' + i + '" class="fielddiv"><input type="text" class="field" name="dynamic[]" value="' + i + '" /><a href="#" class="remove_question">Cancella</a><hr></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });

    $(document).on("click", ".remove_question", function(event) {
        alert('dsfsfd');
        //$('#d' + $this.attr('todel')).remove();
    });


    // here's our click function for when the forms submitted

    $('.submit').click(function(){

    var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val());
    });

    if(answers.length == 0) {
        answers = "none";
    }  

    alert(answers);

    return false;

    });


});

Answer 2

对于动态添加的元素，您需要委托的事件处理程序：

$(document).on('click', '#remove_question', function(event) {
    alert('dsfsfd');
});

此外，使用您的代码可以添加无限数量的具有相同 ID 的锚点，但这也不起作用，因为 ID 应该是唯一的。