Question

在我的网站上，我有一个jQuery脚本，当点击一个按钮时，它会用另一个文件中的HTML替换div的内容。每个按钮的ID都与在div中替换的HTML文档的文件名相同。

在主页上，所有按钮在单击时都有效，并且内容会被替换。但是，当我尝试单击其中一个新按钮以再次替换内容时，没有任何反应。知道为什么它不会执行两次吗？

// JavaScript Document
$( document ).ready(function() {
  $('.button').click(function(e) {
    e.preventDefault(); // Stops the browser from following the href in the <a>
    var that = $(this)
        , id = that.attr('id')
        , url = 'questions/' + id + '.html'
        ;
    $.post(url, function(data) {
      $('#replace').html(data);    // Display external file to target div
      window.scrollTo(0, 0);       // Forces a scroll back to the top of the page
    });
 });
});

Answer 1

假设.button元素是被替换的HTML的一部分，新元素不会附加处理程序。您希望将处理程序附加到正文，由button类过滤：

$(document).on('click', '.button', function(e) {
    e.preventDefault(); // Stops the browser from following the href in the <a>
    var that = $(this)
        , id = that.attr('id')
        , url = 'questions/' + id + '.html'
        ;
    $.post(url, function(data) {
      $('#replace').html(data);    // Display external file to target div
      window.scrollTo(0, 0);       // Forces a scroll back to the top of the page
    });
});

jQuery脚本只执行一次

1 个答案: