добавить событие к элементу после того, как он удалит себя и снова добавит себя

Я попытался удалить кнопку и 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()/ не работает?

Спасибо.


javascript jquery
person K2R    schedule 19.12.2018    source источник
comment
какая у вас версия jquery?   -  person kamalpreet    schedule 19.12.2018
comment
jquery-3.3.1.js   -  person K2R    schedule 19.12.2018
comment
Почему вам нужно удалить кнопку и добавить ее снова? Просто изменить нельзя?   -  person Shidersz    schedule 19.12.2018
comment
.delegate уже устарел   -  person Darryl Ceguerra    schedule 19.12.2018
comment
это работает в первый раз... добавлен новый элемент кнопки. но поскольку старая кнопка, на которую был добавлен обработчик событий, удалена и не повторно подписана на новый элемент кнопки, счетчик не увеличивается после 0. Однако onclick=clicked() работает.   -  person gp.    schedule 19.12.2018
comment
Я пытаюсь сделать функцию подстраницы, Lol изменить это - хорошая идея. Спасибо   -  person K2R    schedule 19.12.2018
comment
да, устарело.   -  person K2R    schedule 19.12.2018
comment
как я могу повторно подписаться на новую кнопку в jquery? Я пытался связать, но не удалось, и это похоже на цикл.   -  person K2R    schedule 19.12.2018

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, $("[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< /а>

person antoni    schedule 19.12.2018
comment
удовольствие, дайте мне знать, если вам что-то непонятно. - person antoni; 19.12.2018

arrow_upward
0
arrow_downward

Используйте функцию 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>

person yip102011    schedule 19.12.2018