Question

我有这样的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>

当点击“点击新行”时，我还有一个正确触发的JS函数。看看这里：

$('.addNewRow').click(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");
});

当我打开我的网站并手动导航到我目前正在使用的DIV时，这段代码完全正常。值得一提的是，我正在做一些ajax-stuff，我猜这是问题的一部分：

$('#updateCatalogue').click(function() {

    // inserting stuff 
    $('.new_question').each(function() {
        data = "some data";
        $.ajax({
            url: "my-file.asp",
            type: "GET",
            data: data,
            success: function(response) {
                console.log(question);

                // reload the frame afterwards
                $(".inner-content").load(location.href + " #catalogue");
            }
        });
    });
});

updateCatalogue - 函数中的部分已正确处理，my-file.asp内的代码也正在执行其工作。但是一旦页面“重新加载”，我就不能再点击“添加新行”了......或者更像是，之后它没有做任何事情。我的控制台中没有JS错误。

由于我正在重新加载整个页面，我应该可以访问所有内容，对吧？

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

这些元素不是动态创建（我猜），因为网站重新加载，即使通过ajax调用

Answer 1

问题是，当您使用$('selector').click()时，它只会在第一次设置点击事件。如果你重建它，那么它就会失去它click()。

您可以将$('selector').click()位移到您创建它们的位置，但更好的解决方案是改为使用$(document).on()。

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

您只需更改第一个代码块即可。通过将点击事件放在document（页面上的所有内容）而不是特定元素上，如果这些元素发生变化或消失，它将不会丢失。然后第二个参数提供了一个过滤器选择器，它与使用.click()时通常所说的相同，即使被点击的元素与该过滤器匹配，也只是触发该点击。

Answer 2

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

您最好使用jQuery.on。

如果您将点击处理代码更改为以下内容，则应该有效：

$('.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");
});

以上是有效的，因为您不会删除/替换内部内容DIV本身，而只是其中的内容。

重新加载DIV（站点）可防止进一步的OnClick处理程序+可见性

2 个答案: