Javascript 重新加载DIV（site）可防止进一步的OnClick处理程序+；可见度

我有这样一个DOM：

<div class="inner-content">
    <div class="catalogue" style="display: none;">
        <div class="wrapper">
            <!-- some dom here -->
            <button type="button" id="updateCatalogue">
        </div>
    <span class="addNewRow" data-row="1">add new row</span>
</div>

updateCatalogue

-函数中的部分已正确处理，

my file.asp

中的代码也在正常工作。但是一旦页面“重新加载”，我就不能再点击“添加新行”了。。。或者更像是，在那之后它什么都不做。我的控制台中没有JS错误

因为我正在重新加载整个页面，所以我应该可以访问所有内容，对吗

旁注：这些函数在$（document）.ready（）中，如果这对它很重要的话

---

这些元素不是动态创建的（我猜），因为站点是重新加载的，即使通过ajax调用，问题是，当页面第一次加载时，您将单击处理程序绑定到页面上存在的按钮，但是当您重新加载DIV内容时，该按钮将被替换为新的（未绑定的）按钮一个

你最好用它

如果将单击处理代码更改为以下代码，则该代码应能正常工作：

$('.inner-content').on('click', '.addNewRow', function() {

    // determine closest wrapper
    var wrapper = $(this).closest(".questions");
    var kategorieId = $(this).data("row");

    // add another row
    $("<div class='question_wrapper'><input type='text' class='textinput_questions new_question' data-category='"+kategorieId+"' name='new_question["+kategorieId+"][]'><input type='checkbox' class='radioinput' style='margin-left: 6px !important;' name='new_questionActive[]'>").insertAfter(".question_wrapper:last");
});

$（'.inner content'）。在（'click'，'addNewRow'，function（）上{
//确定最近的包装器
var wrapper=$（this）.closest（“.questions”）；
var kategorieId=$（此）.data（“行”）；
//添加另一行
$（“”）之后插入（“.question\u wrapper:last”）；
});

---

上述操作之所以有效，是因为您没有删除/替换内部内容DIV本身，而只是其中的内容。

问题在于，当页面首次加载时，您将单击处理程序绑定到页面上存在的按钮，但当您重新加载DIV内容时，该按钮将被替换为新的（未绑定的）按钮

你最好用它

如果将单击处理代码更改为以下代码，则该代码应能正常工作：

$('.inner-content').on('click', '.addNewRow', function() {

    // determine closest wrapper
    var wrapper = $(this).closest(".questions");
    var kategorieId = $(this).data("row");

    // add another row
    $("<div class='question_wrapper'><input type='text' class='textinput_questions new_question' data-category='"+kategorieId+"' name='new_question["+kategorieId+"][]'><input type='checkbox' class='radioinput' style='margin-left: 6px !important;' name='new_questionActive[]'>").insertAfter(".question_wrapper:last");
});

$（'.inner content'）。在（'click'，'addNewRow'，function（）上{
//确定最近的包装器
var wrapper=$（this）.closest（“.questions”）；
var kategorieId=$（此）.data（“行”）；
//添加另一行
$（“”）之后插入（“.question\u wrapper:last”）；
});

---

上述操作之所以有效，是因为您没有删除/替换内部内容DIV本身，而只是其中的内容。

问题是，当您使用

$（'selector'）。click（）

，它只会在第一次设置click事件。如果重新构建，则它将丢失其

单击（）

您只需移动

$（“选择器”）。单击（）

位到创建它们的位置，但更好的解决方案是改为使用

$（文档）。on（）

$(document).on('click', '.addNewRow', function () {
    // do something here
});

---

您只需将第一个代码块更改为该代码块即可。通过将click事件放在

文档上

（这是页面上的所有内容），而不是放在特定元素上，如果这些元素发生更改或消失，它不会丢失。然后，第二个参数提供了一个过滤器选择器，与使用

时通常使用的过滤器选择器相同。click（）

告诉它仅触发该单击，即使单击的元素与该过滤器匹配。

问题是，当您使用

$（'selector'）。click（）

，它仅在第一次设置单击事件。如果重新构建，则它将丢失其

单击（）

您只需移动

$（“选择器”）。单击（）

位到创建它们的位置，但更好的解决方案是改为使用

$（文档）。on（）

$(document).on('click', '.addNewRow', function () {
    // do something here
});

---

您只需将第一个代码块更改为该代码块即可。通过将click事件放在

文档上

（这是页面上的所有内容），而不是放在特定元素上，如果这些元素发生更改或消失，它不会丢失。然后，第二个参数提供了一个过滤器选择器，与使用

时通常使用的过滤器选择器相同。click（）

告诉它仅触发该单击，即使所单击的元素与该过滤器匹配。

但这些并不是“动态创建的”，因为在，所以它们已经存在于dom中，与另一个相似，但不是完全相同的。这完全不同，足以证明这是自己的问题。但这些并不是“动态创建的”，因为页面之前已重新加载，所以它们已经存在于dom中。它与另一个类似，但不是完全重复的。它的不同足以证明它是自己的问题。