将事件添加到元素后删除自身并再次附加自身答案

【问题标题】：add event to element after it remove itself and append itself again将事件添加到元素后删除自身并再次附加自身
【发布时间】：2018-12-19 03:41:07
【问题描述】：

当我单击它时，我试图删除一个按钮和 alert()，然后该函数将在搜索高级的遗产后，将一个“相同”按钮附加到容器 div，我尝试使用 on()/live()/delegate()/ 不幸的是它们不起作用。

<body>
    <div id="container"></div>
    <hr>
    <button onclick="clicked()">Other one</button>
    <hr>
</body>
<script>
$(document).ready(function(){
    var i = 0;
    $("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!</button>");
    $("[id='btn_sub']").delegate(this,"click",function(){
        $("#container").empty();
        $("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!"+i+"</button>");
        i++;
    });//tried click/on click/live
});
function clicked(){
    alert(1);
}
</script>

最后，在这个例子中，$(document).ready() 中的 clicked 函数和 alert 的部分起作用了。

有没有其他方法可以达到同样的效果？为什么 on()/live()/delegate()/ 不起作用？

谢谢。

【问题讨论】：

你的 jquery 版本是多少？
jquery-3.3.1.js
为什么需要删除按钮并重新附加？不能随便修改吗？
.delegate 已被弃用
第一次确实可以工作...添加了新的按钮元素。但是由于添加了事件处理程序的旧按钮被删除并且没有重新订阅新的按钮元素，所以 count 在 0 之后不会增加。onclick="clicked()" 虽然有效。

标签： javascript jquery

【解决方案1】：

首先$("[id='btn_sub']") 可以替换为$("#btn_sub")，然后实际上最好使用一个类，因为您可能有很多按钮。

这是一个工作示例作为说明：https://codepen.io/antoniandre/pen/XoNNpO

$(document).ready(function(){
    $("#container").on("click", '.btn_sub', function() {
        removeButton(this);
    });
});
function addButton() {
    $("#container").append("<button class='btn_sub'>Delete Me!</button>");
}
function removeButton(btn) {
    btn.remove();
}

将on() 绑定在容器上，您实际上可以确保任何匹配的按钮.btn_sub 在将来创建它们时都会附加此事件。

关于live，它与on 相同，但现在已弃用，因此您可以忘记它。 https://api.jquery.com/live/#live-events-handler

【讨论】：

很高兴，如果您有不清楚的地方，请告诉我。

【解决方案2】：

使用 on 函数附加事件。http://api.jquery.com/on/

$(document).ready(function () {
	var i = 0;
	$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!</button>");
	$("#container").on("click", "[id='btn_sub']", function(){
		$("#container").empty();
		$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!" + i + "</button>");
		i++;
	});
});
function clicked() {
	alert(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div id="container"></div>
    <hr>
    <button onclick="clicked()">Other one</button>
    <hr>
</body>

【讨论】：

【解决方案3】：

var i = 0;
var btn = "<button id='btn_sub' onclick='clicked()'>Click Me!</button>";

($(function(){
    $("#container").append(btn);
    $("#container").on("click", '#btn_sub', function() {
        $("#container")
          .empty()
          .append($(btn).text($(btn).text() + " " + i++));
    });  
}));

function clicked() {
    alert(i);
}

<body>
    <div id="container"></div>
    <hr>
    <button onclick="clicked()">Other one</button>
    <hr>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：