javascript - div 内丢失 javascript 选项(div 刷新后)

Question

我可以选择在单击该 DIV 内的按钮后刷新该 DIV

<div class="col-md-12" id="reloadedit" >
    <div class="block">
        <div class="block-header block-header-default">
             <h3 class="block-title">Edit Language</h3>
        </div>
        <div class="block-content" >
        <?php
        DoThisFunction($link);
        ?>
        </div>
  </div>
</div>
</div>

我还创建了一个简单的函数来刷新 div:

<script>
function updateDiv()
{ 
    $("#reloadedit").load(location.href + " #reloadedit>*", "");
}
</script>

该 DIV 内的所有内容都是 PHP 生成的。 该函数运行良好，并使用更新的函数刷新该 DIV。

我有两个问题:

• 第一次刷新后，div 内的任何按钮不起作用。基本上，我单击一个执行任务的按钮(例如激活 ID X)。它可以很好地处理一切并刷新div并显示为事件状态。如果我再次单击该按钮(以禁用)，它不会执行任何操作。 (请注意，这些操作是通过 sweetalert 和 jquery 调用完成的)。
  

• 如何制作一个通用函数，以便每次需要刷新 div 时都可以调用它(比如使用 updateDIV("#DIVNAMEHERE") )？

提前致谢。

编辑: 我的点击按钮的代码是:

$("button").click(function() {
let button = $(this); // the button you clicked
let id = button.data("id"); // the data-id attribute of the button
let func = button.data("function");
if(func == "publish"){
    Publish(id);
}
});

Answer 1

当您刷新 div 内的内容时，您将删除附加到内部元素的所有事件监听器。

由于您正在处理动态内容，因此需要使用 event delegation .

更改您的事件处理程序:

$("button").click(function() {
    //Code
});

采用这种格式:

$('#reloadedit').on( "click", "button", function(e) {
    e.preventDefault();
    //Code
});

当单击 div 内的任何 button 时，这将触发单击事件处理程序。