Question

我正在使用jQuery向表单添加额外的选择和文本字段。但是，我希望能够使用“删除”按钮删除添加的文本字段。

一旦添加了字段，jQuery似乎无法检测到它。

的jQuery

var counter = 2;

$("#addButton").click(function () {


    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'contact-list-div-' + counter).attr("class", 'contact-list-div');

    newTextBoxDiv.after().html('<select></select>' +
    '<input type="text" name="textbox' + counter +
    '" id="textbox' + counter + '" value="" >' + '<button type="button" class="removeButton" id="removeButton-' + counter + '">Remove Button</button>');

    newTextBoxDiv.appendTo("#contact-list");


    counter++;
});


$(".removeButton").click(function() {
    alert(this.id); //this never shows, only on the element that was 
                    //added directly added using html, in this case removeButton-1
});

HTML

    <div id="contact-list">
            <div class="contact-list-div" id="contact-list-div-1">
                <select></select>
                <input>
                <button type='button' class='removeButton' id='removeButton-1'>Remove Button</button>
            </div>
        </div>
    <input type='button' value='Add Button' id='addButton'>

Answer 1

您需要使用活动 - delegation：

$(document).on('click', '.removeButton',function() {
    $(this).parents('.contact-list-div').remove();                     
});

在您点击.removeButton的事件监听器后，您将内容附加到DOM 。因此，在将click事件绑定到它时，此元素不存在。

通过事件委派，您可以将事件列表器绑定到现有父级（在这种情况下为document，但#contact-list也可以）。这将听取与.removeButton - 选择器匹配的后代的所有事件。

Demo

Answer 2

$('#contact-list').on('click', '.removeButton', function() {
    //Your code                        
});

Answer 3

这是因为您将事件绑定到尚不存在的元素。

使用jQuery委派在现有元素上启用处理程序：

$("body").on("click", ".removeButton", function() {
    alert(this.id); 
});

Answer 4

只在第一个按钮添加点击监听器尝试使用delegate：

$(document).delegate(".removeButton", "click", function() {
    alert(this.id);
});

这告诉文档每当事件点击在类“removeButton”的元素上出现时，它应该调用该回调

（你可以看到它正常工作here）

Answer 5

因为该元素是使用jQuery动态添加的，所以jQuery的正常.click事件将无法检测到新添加的元素。

改为使用.on。请参阅以下示例：

$("body").on("click", ".removeButton", function() {
    alert(this.id); //this never shows, only on the element that was 
                    //added directly added using html, in this case removeButton-1
});

删除jQuery添加的按钮

5 个答案: