事件处理程序不HTML重新描绘后工作了

-1

$.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文件结构有什么问题，或者我的代码有问题（或者两者都有！）？

谢谢！

来源

2014-11-22 matt1101

我不知道，因为我没有看到你的'loadHTMLfunction'，但我的猜测是你期待'click'事件是绑定到尚未创建的元素。如果是这种情况，那么''click'事件会在页面加载和'loadHTMLfunction'内部执行的函数中执行。 – PHPglue 2014-11-22 01:46:43

如果可以，我愿意在下面的回答中进一步改进1）提供更多关于我们正在玩的DOM元素的信息，并且2）显示'loadHTMLfunction（）'是什么。从现在开始，没有足够的信息可以为此提供很好的答案。 – Xenyal 2014-11-22 01:58:54

问题是，他将click事件绑定到了“.summary-link”，但是当再次调用loadHTML函数时，click事件不会再次绑定。正如我在我的回答事件绑定必须在html创建后loadHTML函数。 – 2014-11-22 02:04:55

-1

你应该包括

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

来源

2014-11-22 01:47:45

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

来源

2014-11-22 01:54:31 Xenyal

事件处理程序不HTML重新描绘后工作了

回答

相关问题