javascript - 删除附加代码不起作用

Question

我在按钮上附加了复选框，单击它工作正常，但在附加通过另一个按钮单击删除这些复选框后根本不起作用。我需要有人检查和帮助。

$(".btn").on('click', function(){
    $('#Locations').append('<div id="mydiv">' +
                       '<input type="button" value="-" class="rmvbtn">' +
                       '<input type="checkbox" name="myCheckbox" />' +
    $(".txt").val() +
     "</br>............</br>" +
     '</div>');
});

$(".rmvbtn").click(function(){
    $('#mydiv').remove();
});

Answer 1

当前您使用的称为“直接”绑定(bind)，它仅附加到代码进行事件绑定(bind)调用时页面上存在的元素。

您需要使用Event Delegation使用.on()动态生成元素或操作选择器(例如删除和添加类)时的委托(delegate)事件方法。

一般语法

$(document).on('event','selector',callback_function)

根据您的代码

$('#Locations').on("click", ".rmvbtn", function(){
    $('#mydiv').remove();
});

$(".btn").on('click', function(){
    $('#Locations').append('<div id="mydiv">' +
                       '<input type="button" value="-" class="rmvbtn">' +
                       '<input type="checkbox" name="myCheckbox" />' +
    $(".txt").val() +
     "</br>............</br>" +
     '</div>');
});

$('#Locations').on("click", ".rmvbtn", function(){
    $('#mydiv').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Create</button>
<div id="Locations"></div>