javascript - 从 DOM 中删除 $object 而不从该对象中删除绑定(bind)的事件监听器

Question

假设我有一些带有绑定(bind)事件的 jQuery 对象，我正在容器内交换这些对象

var $obj1 = $('<button type="button">Button 1</button>');
$obj1.click(function() { console.log("Button 1 clicked") });

var $obj2 = $('<button type="button">Button 2</button>');
$obj2.click(function() { console.log("Button 2 clicked") });

$("body").html($obj1);

//here the $obj1 click event listener is removed from $obj1
$("body").html($obj2);

//here nothing happen when I click on the Button 1
$("body").html($obj1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

有没有一种方法可以添加/删除 jQuery 对象而不必每次都绑定(bind)事件监听器？

Answer 1

您可以更改选择/创建监听器的方式

$('body').on('click','button',function(){});

我建议添加一个类或其他方式来确定您要查找的类:

 $('body').on('click','button.first-button',function(){});