javascript - 当我使用 Ajax 刷新部分页面时，JS、jQuery 不起作用

Question

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

在页面的另一部分，我有一个按钮。当我单击它时，会进行 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 有关，当我刷新部分 twig 时它弄乱了之前加载的 JS 文件。但是在那种情况下我能做什么呢？以某种方式刷新加载的 JS 文件？怎么办？

Answer 1

您必须从 Ajax 请求不会重新加载的容器开始在按钮上附加事件监听器，如下所示:

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

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