jQuery load（）使Jquery函数触发多次

Question

这是我的代码。 它加载页面内容而不刷新。

问题是当我单击由jQuery和ajax处理的按钮时，它会在加载页面时触发多次。

例如，如果加载了2页，jQuery将触发两次

如果我加载了4页，则jQuery将加载4次。

 <script>
        $(document).ready(function(){
            //set trigger and container

            var trigger = $('#nav ul li a'),
                container = $('#container');
            //do on click


            trigger.on('click', function(e){
                /***********/
                 e.preventDefault();

               /* reload content without refresh */
                //set loading img
                $('#container').append('<div id = "loading">WAIT...  <img src = "img/ajax-loader-small.gif" alt="Currently loading"   /></div>');
                //change img location to center
                $("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
                //get the  trigger to reload the contents
                var $this = $(this),
                    target = $this.data('target');

                container.load(target + '.php');

              //  return false;
                $(trigger).die('click');
            });
        });

---

该脚本触发的次数与我通过load（）函数加载页面的次数相同，这意味着同一条帖子将多次插入数据库中

<script>

    $(document).ready(function(){


    $(document).on("click",".fa-pinterest-square",function(e) {


        var form = $(this).find('form'); //Since the form is child to <i>

        $.ajax({
            url: "includes/widgets/add_pains.php",
            type: "POST",
            data: form.serialize(),
            success: function(data) {
                alert(data);

            }
        });

    });
    });

</script>

如何解决此问题？

Answer 1

发生这种情况是因为每次加载脚本时都没有清除事件侦听器，并且彼此堆叠的事件侦听器会多次触发。

trigger.off('click').on('click', function(){....})

.off（）方法删除与.on（）关联的事件处理程序。

Answer 2

请使用它可以解决您的问题

    trigger.unbind().click(function()

         //code 
   });

Answer 3

我通过在index.php中插入脚本解决了这个问题，由于包含主页，它可能被多次调用。