Javascript Can'；t删除添加的输入字段

我有一个JavaScript代码，它是我从一个使用.live（）的旧cold中改编而来的，当我使用JQuery 1.9.1时，将其更改为.on（）：

添加新的输入字段可以正常工作。问题是，当单击“删除”时，它没有删除添加的字段。它甚至没有运行事件点击事件，我也不知道为什么

HTML代码：

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
<p>
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    <a href="#" id="remScnt">Remove</a>
</p>
</div>

JS代码：

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

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

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

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#p'）.size（）+1；
$（'#addScnt'）。在（'单击'，函数（）上）{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
});
$（'#remScnt'）。在（'click'，function（）{
警报（“移除”）；
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});

对于动态生成的元素，请使用

.on（）

尝试事件委派

$(document).on('click','#remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
});

---

如果它试图为动态生成的内容运行remove函数，请使用以下处理程序：

$(document).on('click', '#addScnt', function() {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
});

$(document).on('click', '#remScnt', function() { 
    alert('remove');
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
});

$（文档）.on（'click'，'addScnt'，function（）{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
});
$（document）.on（'click'，'#remScnt'，function（）{
警报（“移除”）；
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});

事件委派

同时避免重复ID

我把它们改成了班级

HTML

JavaScript

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

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#p'）.size（）+1；
$（'#addScnt'）。在（'单击'，函数（）上）{
$（'p>
'）。附录（scntDiv）；
i++；
返回false；
});
$（'p#u scents'）。on（'click'，'.remScnt'，function（）{
警报（“移除”）；
如果（i>2）{
$（this.parents（'p'）.remove（）；
我--；
}
返回false；
});
});

问题是

按id选择的选择器

应该只有一个元素具有一个id

可能的重复项。您不能仅将

live

替换为

on

，并期望它能正常工作。签名也已更改，并且有很好的文档记录（例如，在正式文档中；）。您似乎也在添加具有相同id的多个元素。这也可能会导致尝试删除特定元素时出现一些问题。

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

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
        alert('remove');
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});