Question

我有以下jquery代码

$(".delete").on('click', function (e){
    e.preventDefault();
    var id = $(this).prop('id');
    console.log('Delete button id: '+id);
    var formWrapper = $(".form-wrapper:nth-child("+id+")");
    console.log(formWrapper);
    formWrapper.remove();
});

删除.delete位于表单内的按钮

<button class="btn btn-danger delete">-<button>

并在页面加载后按钮在页面上加载。所以我使用on函数来附加click事件。但它不起作用，从不调用函数。是不是应该不仅为加载期间页面上的元素工作，而是为那些后来加载的元素工作？

Answer 1

您说特定按钮已动态加载到DOM，因此在此上下文中您必须使用event-delegation来使代码正常工作。

通常，您的代码会在.delete加载后立即为类DOM注册元素的事件。实际上我们当时没有任何具有该身份的元素，所以这个上下文选择event-delegation。

我实际上不知道你的dom结构的确切结构，所以我已经使用document来委托click事件，但你应该更喜欢该元素的一些静态父实现它，

尝试，

$(document).on("click",".delete", function (e){

Answer 2

您需要将event delegation用于动态生成的元素。因此，使用委托事件方法使用.on()。

即

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

使用

$(document).on('click',".delete", function (e){

代替document，您应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

Answer 3

你应该使用，

$(document).on('click',".delete", function (){});

或

$(".delete").click(function(){});

Answer 4

您可以尝试 jquery delegate（）方法。

在jquery版本7中有一个术语 live 但是在最近的一个中它被删除并替换为 delegate

您可以查看以下示例

HTML

＆LT; div class =“delete”＆gt;点击这里＆lt; / div＆gt;

的Javascript

$(document).delegate( ".delete", "click", function() {
 alert("Hi")
});

Answer 5

这可能会有所帮助：http://jsfiddle.net/webcarvers/7Qtd7/

HTML：

<button id="one" class="delete"type="button">Id on me</button>
<div id="one">This is the div to remove</div>

JS：

$(document).ready(function(){
$("button.delete").on('click', function(){
   var id = $(this).attr("id");
    $("div#"+id).remove();
});
});

jquery无法正常工作

5 个答案: