javascript - JQuery .load with Setinveral，在刷新时它会重置某些功能并禁用它们

Question

所以我使用 jquery .load 自动刷新页面中的 DIV。

var refreshId = setInterval(function() {loadAdminTab()}, 30000);

});

function loadAdminTab(){
    $( "#maintab" ).load( "admintab2.php", function() {
        $('#loadingsq').fadeOut(0);
    });
}

我还在 $(document).ready 加载中运行“loadAdminTab”。在初始加载时，加载的 DIV 中的所有函数都可以正常工作。但是，在第一个间隔运行之后。加载的 DIV 中的某些功能停止工作。

例如:

< input type="button" id="showdivitem1" value="Button" ><br>
< div id="item1" style="display:none;" >Div Display</div>

<script>
  $('#showdivitem1').mousedown(function(){
     $('#item1').show();
  });
</script>

就像我说的，在页面最初加载后，一切都很好，但是一旦后续的 .loads 运行，$('#item1').show(); 将不适用于我的生活。

正在加载的文档和 div 中重置某些内容。

---

这是我的确切代码，它仍然没有在#maintab 中触发。同样，此代码位于 maintab 中，而不是父项中的外部，这是问题所在吗？

$('#maintab').on('mousedown','#transferCall<?php echo $callid; ?>', function(){
    $('#transfer<?php echo $callid; ?>').css('display','block');
}); 

Answer 1

由于您正在将内容重写到 #maintab 中，因此您在 DOMready 中定义一次的所有事件处理程序 - 对于其中的节点 - 如果一个新的请求更改其内容(即使注入(inject)到该容器内的新元素是相同的:定义的处理程序附加到不再存在的节点)。

所以你需要使用event delegation并在 #maintab(或父元素)

上捕获您的事件

---

例如你的例子变成了

$('#maintab').on('mousedown', '#showdivitem1', function(){
   $('#item1').show();
});

您将处理程序设置为 #maintab(该节点不会在每个 ajax 请求中删除)并且这会捕获 中 mousedown 事件的传播#showdivitem1 元素