事件处理程序在 html 重新呈现后不再工作

Event handler doesn't work anymore after html rerendering

本文关键字：不再 工作 新呈现 程序 html 事件处理      更新时间：2023-09-26

我的js文件中有以下结构：

$.getJSON("data/file.json")
.done(function(data) {
    var loadHTMLfunction =  /* some code */
    loadHTMLfunction();
    
    // updates display based on user filter selection
    $("#select-section").on("change", function() {
        $("article").find(".myClass").remove();
        loadHTMLfunction();
    });
    // text swap event
    $(".summary-link").on("click", function() {
        var el = $(this),
        tmp = el.text();
        el.text(el.data("text-swap"));
        el.data("text-swap", tmp);
    });
})
.fail(function(jqxhr, textStatus, error) {
     // error handling   
});
我的

问题是，我的文本交换事件在第一次加载页面时运行良好，但一旦用户使用选择事件，它就不再起作用了（此事件是要更新显示的选择 html 元素）。

我的 js 文件结构是否有问题或我的代码有问题（或两者兼而有之！

我觉得你的函数上的耦合太紧了。一旦$.getJSON.done，你实际上应该只是将数据分配给一个变量，并将你的事件处理程序绑定到ajax调用的范围之外。代码的重构版本可能如下所示：

(function() {
    var storedData;
    $.getJSON("data/file.json", function(data) {
        storedData = data;
    });
    .error(function(jqXHR, textStatus, errorThrown) { 
        alert("error: " + textStatus + ", Description: " + jqXHR.responsetext); 
    });
    var loadHTMLfunction = function() {
        // your code
    };
    loadHTMLfunction(); // You ought to tell us what this function is
                        // else we don't know if it's redundant or not 
                        // to run so repetitively.
    $("#select-section").on("change", function() {
        $("article").find(".myClass").remove();
        loadHTMLfunction(); // I feel like this is an issue.
    });
    $(".summary-link").on("click", function() {
        var el = $(this),
        tmp = el.text();
        el.text(el.storedData("text-swap"));
        el.storedData("text-swap", tmp);
    });
}());
你应该

包括

// text swap event
    $(".summary-link").on("click", function() {
        var el = $(this),
        tmp = el.text();
        el.text(el.data("text-swap"));
        el.data("text-swap", tmp);
    });

在函数加载HTML函数中。

loadHTMLfunction = function(){
    //your code
    // text swap event
        $(".summary-link").on("click", function() {
            var el = $(this),
            tmp = el.text();
            el.text(el.data("text-swap"));
            el.data("text-swap", tmp);
        });
}

您可能正在执行一些删除元素".summary-link"的操作，并且您只是第一次绑定事件。

相关文章：