jQuery事件多次触发

Question

首先,我做我的家庭作业,我已经搜索谷歌和使用evt.stopPropagation();和unbind方法,而不是固定我的问题.......

这是我的情况:

想象一下,我有一个带有一些链接的左侧边栏,点击每个链接,中间的col将由ajax重新加载,代码如下:

<script>
$('.leftsidebar a').on('click', function(){
    var page = $(this).attr('class')
    $('#middleCol').load('loader.php?page='+ page);
});
</script>

所以每次点击左侧栏标签时,中间的col会加载一个标签class.php,它就好了.

现在在我正在加载中间列的页面中,在页面的末尾我有一些javascripts,例如,如果它loader.php?page=test在test页面中加载我有一些新的jQuery行,例如:

<script>
$('#blah').on('click', function(){
    $.ajax({
        type: 'POST',
        url: 'server.php',
        success: function(response){
            //blah  
        }   
    }); 
});
</script>

现在的问题是,当我第一次通过点击leftside bar一个标签加载测试页面时,它工作得很好,点击#blah只会发送一个请求server.php,但是当我a从leftsidebar 点击另一个时,然后回来到test现在,如果我点击blah,ajax请求将被发送两次到server.php,等等......,如果我再次尝试,请求将被发送3次!

我该如何防止这种行为？解决办法是什么？

我很感激帮助.

Answer 1

如果这个元素只有一个点击处理程序,你也可以这样做:

$('#blah').off('click').on('click', function(){...});

但更好的是不包括无用/冗余代码