Question

我有一个包含MySQL查询的分页结果的DIV。

我试图使用.load（）函数根据点击的页码更改DIV的内容。

除了其他事件监听器停止正常工作外，功能完善。在查询结果中，我有几个用于点击不同按钮等的监听器，一旦我离开第1页就停止工作，即使父页面永远不会改变，内容的ID和名称也是相同的。

这是我正在使用的jquery。

$('input[name="pagenumbutton"]').click(function(){
  var thispagenum = this.value;
  var thispagestart = (thispagenum - 1) * 10;
  $("#result").load("querydb.php", "thispagestart="+thispagestart);  
});

单击任何名为pagenumbutton的输入后，

结果div内容将更新，但随后将不再触发以下jquery。

$('img[name="appdetailimg"]').click(function(){
  var appName = $(this).parent().parent().children().get(0).textContent;
  var appDetail = $(this).parent().children().get(1).value;

  document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
  document.getElementById('detailtext').value = appDetail;

  $("div#fuzz").fadeIn();
  $("div#detaildiv").center();
  $("div#detaildiv").show();
});

如果我静态更改页面并重新加载整个索引页面，但是当我使用.load（）函数仅重新加载div时，一切正常。

这是使用.load（）函数的预期行为还是我遗漏了什么？

Answer 1

事件处理程序适用于应用它们的特定元素。如果元素被替换，即使是相同的元素，处理程序将不再存在。

jQuery使用live，delegate和on来解决这个问题，后两者被弃用了。

如果使用on应用处理程序，则将其附加到不会更改的父元素，因此可以在修改子元素时触发它：

$('#result').on('click','img[name="appdetailimg"]', function(){
   ...
}

Answer 2

这是预期的行为。 “click”事件绑定到此调用中当前可访问的元素。因此，绑定“click”事件后添加到页面的任何内容都不会被绑定。

您需要查看“live”，“delegate”和“on”。

// change to "live" and bind the "click" event
// "click" event will bind to all selected elements in the future
$('img[name="appdetailimg"]').live('click', function(){
  var appName = $(this).parent().parent().children().get(0).textContent;
  var appDetail = $(this).parent().children().get(1).value;

  document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
  document.getElementById('detailtext').value = appDetail;

  $("div#fuzz").fadeIn();
  $("div#detaildiv").center();
  $("div#detaildiv").show();
});

Answer 3

不要使用.live()它已被弃用并观看整个DOM ......这肯定是多余的

它与加载没有任何关系，它与你使用load（）所做的事件绑定匹配有关;

当调用那段JavaScript时，click函数绑定到DOM中可用的元素。

请改为尝试：

$('.wrapper').delegate('input[name="pagenumbutton"]', 'click', function(){
      var thispagenum = this.value;
      var thispagestart = (thispagenum - 1) * 10;
      $("#result").load("querydb.php", "thispagestart="+thispagestart);  
    });
    $('.wrapper').delegate('img[name="appdetailimg"]', "click", function(){
      var appName = $(this).parent().parent().children().get(0).textContent;
      var appDetail = $(this).parent().children().get(1).value;

      document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
      document.getElementById('detailtext').value = appDetail;

      $("div#fuzz").fadeIn();
      $("div#detaildiv").center();
      $("div#detaildiv").show();
    });

Answer 4

我假设第二个代码块引用了重新加载区域中的元素。在这种情况下，使用'delegate'（将'body'替换为元素的静态容器）：

$('body').on('img[name="appdetailimg"]', 'click', function(){
  var appName = $(this).parent().parent().children().get(0).textContent;
  var appDetail = $(this).parent().children().get(1).value;

  document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
  document.getElementById('detailtext').value = appDetail;

  $("div#fuzz").fadeIn();
  $("div#detaildiv").center();
  $("div#detaildiv").show();
});

Answer 5

click仅攻击执行click附加时呈现的元素的函数。

你应该根据你的JQuery版本使用JQuery on \ live \ delegate函数：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on版本：

$('body').on('click', 'img[name="appdetailimg]', function(){
      var appName = $(this).parent().parent().children().get(0).textContent;
      var appDetail = $(this).parent().children().get(1).value;

      document.getElementById('detaildivtd').textContent = appName + " : DETAIL";
      document.getElementById('detailtext').value = appDetail;

      $("div#fuzz").fadeIn();
      $("div#detaildiv").center();
      $("div#detaildiv").show();   
   });

Answer 6

@swatkins是正确使用：

$('body').delegate('img[name="appdetailimg"]', 'click', function(){.....}

执行load（）后Jquery监听器不工作

6 个答案: