jQuery 脚本只执行一次

Question

在我的网站上，我有一个 jQuery 脚本，当单击按钮时，它会用另一个文件中的 HTML 替换 div 的内容。每个按钮都有一个 ID，该 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
    });
});