Question

我的页面中包含一些JS文件，这些文件很容易在click ant等上显示块。

在页面的另一部分，我有一个按钮。当我点击它时，会发出一个ajax调用，它返回我在页面上显示的一些值。要显示它，我正在重新加载页面的一部分：

$(document).ready(function () {
    $(document).on('click', '.add', function (e) {
    $this = $(this);
    $.ajax({
        type: 'POST',
        url: 'add',
        dataType: 'JSON',
        data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
        success: function (data) {
          if(data.success == false){
           alert('error')
          }else{
            $('.test').load(" .test");
            $('.sidebar').load(" .sidebar");
            $('.top').load(" .top");
           }
        }
    });
});

这会重新加载页面的一部分，显示值等。

然而，在进行ajax调用之后，JS停止工作。当我点击我的按钮时，没有任何反应。没有错误或任何东西。

我认为当刷新部分树枝时它与ajax有关，它会混乱以前加载的JS文件。但在那种情况下我该怎么办？以某种方式刷新加载的JS文件？怎么样？

Answer 1

您必须从容器开始附加事件侦听器，该容器不会被Ajax请求重新加载，如下所示：

//#mainCont is a container that doesn't get reloaded by Ajax

$("#mainCont").on("click", ".yourBtn", function(){
        //do something
});

Answer 2

正如@Nacho M所说，你需要从被加载的元素重新启动监听器，所以你应该有这样的东西：

function init() {
    $(document).on('click', '.yourclass', function (e) {
     //your content
    }

     // add every button who needs to be reloaded.
}

首先在加载页面上启动它们：

$("document").ready(function() {
init();
})

关于Ajax调用的成功：

$.ajax({
    type: 'POST',
    url: 'add',
    dataType: 'JSON',
    data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
    success: function (data) {
      if(data.success == false){
       alert('error')
      }else{
        $('.test').load(" .test");
        $('.sidebar').load(" .sidebar");
        $('.top').load(" .top");
        init();
       }
    }
});

JS，当我用Ajax刷新部分页面时，jQuery无法正常工作

2 个答案: