Question

当我单击按钮时，我试图删除按钮和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（）中删除，并且警报部分起作用。

还有其他方法可以达到同样的效果吗？为什么on（）/ live（）/ delegate（）/不起作用？

谢谢。

Answer 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

Answer 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>

Answer 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>

将事件删除后添加到元素并再次追加

3 个答案: