Question

我在JQuery中有一些函数在我执行Ajax请求（到PHP文件）之后停止工作以向DOM添加元素。

这是ajax函数：

function paginacion(pagina){
  $.ajax({
    method: "GET",
    url: "paginacion.php",
    data: {pag: pagina}
  })
    .done(function(msg) {
    $(".bt_container").remove();
    $(".contenido").append(msg);
  });
}

我称之为：

$(".button").on("click", function(){

  var pag = parseInt($(this).attr("data-pag"));
  pag++;

  paginacion(pag);

});

当我点击按钮时，它第一次正常工作。但是我检索的元素应该与另一个函数一起使用，而它们不会，而前面的元素可以正常工作而没有任何问题。此外，旧的按钮被删除，另一个按钮被添加到文件的末尾，由与上面相同的功能检索。那个按钮也不起作用。

我确信我在使用JQuery时遇到了一些问题，因此无法使用我正在检索的这些新DOM元素。我能做些什么才能让它发挥作用？

Answer 1

使用event delegation：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$(document).on('click', '.button', function () {
    var pag = parseInt($(this).data("pag"));
    //                         ^^^^
    pag++;
    paginacion(pag);
});

另外，使用data()获取数据属性值。

http://api.jquery.com/data/

参考：http://learn.jquery.com/events/event-delegation/

Answer 2

动态加载！将.on用于Event Delegation。

$("body").on('click', '.button', function () {
    var pag = parseInt($(this).attr("data-pag"));
    pag++;
    paginacion(pag);
});

Answer 3

您需要将.on()用于动态生成元素的bindig事件

$(document).on('click', '.button', function () {
    var pag = parseInt($(this).attr("data-pag"));
    pag++;
    paginacion(pag);
});

Answer 4

您正在寻找活动委派。您动态添加并替换dom元素使用事件委托。

$(".contenido").on("click", ".button", function(){
//------^ Immediate parent or document
    // Your code
});

JQuery没有使用新的DOM元素

4 个答案: