Question

我开始使用以下HTML：

    <div id="p_scents">

       <p>
          <label for="p_scnts">Friend n°1</label>
          <input type="text" id="p_scnt" size="20" name="name_0" class="form-control" placeholder="Name of your friend" />
          <input type="text" id="p_scnt address-input-0" class="form-control" name="address_0" placeholder="Their location"/>
       </p>
    </div>

    <button id="addScnt" type="button">Add a friend</button>

我想用jQuery添加一些额外的输入，由于以下脚本，我成功完成了这项工作：

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

        $('#addScnt').click(function() {
                $('<p><label for="p_scnts">Friend n°' + i +'</label><input type="text" id="p_scnt" size="20" name="name_' + (i-1) +'" class="form-control" placeholder="Name of your friend" /><input type="text" id="p_scnt address-input-' + (i-1) +'" class="form-control" name="address_' + (i-1) +'" placeholder="Their location"/> <button id="remScnt" type="button">Remove friend</button>').appendTo(scntDiv);
                i++;
                console.log(i);
                return false;
        });

        $('#remScnt').click(function() { 
                if( i > 2 ) {
                        $(this).parent('p').remove();
                        i--;
                }
                return false;
        });

});

我的第一段代码，用于检查#addScnt元素上的点击，并在div上添加一个新元素，就像一个魅力。

但是，我的第二段代码检查#remScnt元素上的点击并应删除其父<p>元素，根本不起作用，我无法弄清楚原因。我尝试用console.log()进行调试但是我失败了...任何线索都会非常感激！

Answer 1

由于remScnt是动态的，您需要委托点击，替换此行：

 $('#remScnt').click(function() {

有了这个：

 $(document).on('click','.remScnt',function() {

顺便说一句，ids必须是唯一的，请确保用类替换id。

<button class="remScnt"

使用jQuery动态添加/删除输入 - 无法删除输入

1 个答案: