动态创建的DOM操作按钮未触发事件

Dynamically created DOM manipulation button not firing event

本文关键字：事件 按钮 操作 创建 DOM 动态      更新时间：2023-09-26

我有一个函数可以添加和删除字段，但remove函数无法正常工作。

HTML:

<div id="parts">
    Part
    <input type="text" id="auto_part" name="auto_part" />
                <br />
    Description
    <input type="text" id="auto_description" name="auto_description" />
                <br />
</div>
    <a href="#" id="addField">Add another part</a>

jQuery:

$(function() {
var scntDiv = $('#parts');
var i = $('#parts input').size();
$('#addField').on('click', function() {
    $('<br /><div id="parts"><span>Part</span> <input type="text" id="auto_part'+i+'" name="auto_part'+i+'" /><br />').appendTo(scntDiv);
    $('<span>Description</span> <input type="text" id="auto_description'+i+'" name="auto_description'+i+'" /> <br />').appendTo(scntDiv);
    $('<input type="hidden" id="row_count" name="row_count" value="" />').appendTo(scntDiv);
    $('<a href="#" id="removefield">Remove</a></div>').appendTo(scntDiv);
    i++;
    return false;
});
$('#removefield').on('click', function() { 
    if( i > 2 ) {
            $(this).parents('div').remove();
            i--;
    }
    return false;
});
});

问题一定与这条线有关：

$('#removefield').on('click', function() {

它不能通过那个条件。当我点击删除时，它什么也不做，只是滚动到顶部。

您正在将click处理程序绑定到DOM中存在的元素。但是，您的#removefield元素是动态添加的。因此，事件处理程序没有附加到它

您可以使用.on()来使用事件委派，还可以处理未来的元素。此外，您可能希望使用类名而不是和id属性。id属性需要是唯一的，但是可以将类名设置为任意多的元素。

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


$("#parts").on("click", ".removefield", function() { 
  /* ... */
});

"Remove"链接不起作用的原因是，您正在逐部分添加动态<div>元素，从而使其成为无效标记。你应该一次把它们加在一起。例如，

$('#addField').on('click', function () {
    var part = '<div id="parts' + i + '"><span>Part</span> <input type="text" id="auto_part' + i + '" name="auto_part' + i + '" /><br/>' +
        '<span>Description</span> <input type="text" id="auto_description' + i + '" name="auto_description' + i + '" /> <br />' +
        '<input type="hidden" id="row_count' + i + '" name="row_count' + i + '" value="" />' +
        '<a href="#" class="removefield' + i + '">Remove</a></div>';
    scntDiv.after(part);
    i++;
    return false;
});


$(document).on("click", ".removefield", function() {
    if( i > 2 ) {
        $(this).parent('div').remove();
        i--;
    }
    return false;
});

你可以在这里看到。

尝试

$('#removefield').live("click", function() {
相关文章：