Question

我的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   
});

我的问题是我的文本交换事件在第一次加载页面时效果很好但是一旦用户使用了选择事件它就不再工作了（这个事件是一个select html元素来更新显示）

我的js文件结构中有什么问题或我的代码中有错误（或两者都有！）？

谢谢！

Answer 1

我觉得你的功能耦合太紧了。一旦$.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);
    });
}());

Answer 2

你应该包括

// 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);
    });

在函数loadHTMLfunction中。

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”的动作，你只是第一次绑定事件。

html重新渲染后，事件处理程序不再起作用

2 个答案: