Onchange事件成功完成，但使其他元素无用

Question

我在过去的2-3小时中一直试图解决此问题，但最终放弃了。这是我的JavaScript/jQuery的一部分。

$(function() {  
    $('#ob').change(function() {
       var id = $("#ob").val();  
       var form_data = {
           id: id,
           OB: 3 
       };
       $.ajax({
           url: "changeinfo.php",
           type: 'POST',
           data: form_data,
           success: function(data) {
               $("#finfoob3").html(data);                             
           }
       });
       return false; 
   });
});  

上面成功修改了更改的DIV元素。

但是，在该div元素中，有一个带有ID = obt3的按钮，而无效。实际上，它覆盖了其他东西。我将另一个帖子值ob发送给Ajax调用，并将其与obt相连，以使其变为opt3。然后，我将按钮的ID放置在opt3上，但它仍然无法响应点击事件。

我尝试使用Google Chrome检查元素，并且该元素的ID成功地更改为APT3，但不会响应单击事件。

Answer 1

问题是，当您替换#finfoob3的内容时，您将销毁了所有居住在那里的节点以及所有活动处理程序。有两种处理方法：

• 替换了Div内容后，重新创建了您需要的任何事件处理程序。
• 使用事件委托将事件处理程序附加到#finfoob3，因此当您更改其内容时不会被破坏。

由于您使用的是jQuery，因此应该查看.on（）函数。它为您提供了一个简单的方法来定义事件委托。

Answer 2

这可能会有所帮助。

$(document).on("click", "#obt3", function() {
       //do whatever
   });

在这里，我们将文档与所有动态创建的＃obt3元素绑定。

Answer 3

如果我正确理解您的问题。您的DIV具有ID finfoob3，在此DIV中，您有一个带有ID obt3的按钮，并且在此按钮上有一个事件单击处理程序，并且您的另一个元素具有ID ob按钮obt3，它与您之前拥有的按钮相同，但是现在它没有响应点击事件

和这个opt3事件处理程序类似于

$('#obt3').click(function(){ 
    //Some code which you want to perform
});

但是它不起作用，所以将其更改为

$('#finfoob3').on('click', '#obt3' ,function(){ 
    //Some code which you want to perform
});

它将按照您的需求工作，但请确保您使用的是1.6版或更高版本。