2

首先，我做了我的家庭作业，我已经搜索了谷歌并使用了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，这很好。

现在在我正在加载的页面中，在页面的末尾我有一些 javascript，例如，如果它loader.php?page=test在test页面中加载，我有一些新的 jQuery 行，例如：

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

现在的问题是，当我第一次通过单击左侧栏一个标签来加载测试页面时，它工作得很好，单击时#blah只有一个请求将被发送到server.php，但是当我从左侧栏单击另一个a时，然后回来到test，现在如果我点击blah，ajax请求将被发送两次server.php，以此类推......，如果我再试一次，请求将被发送3次！

我怎样才能防止这种行为？解决办法是什么？

我很感激帮助。

4

5 回答 5

5

如果此元素绑定的点击处理程序不超过一个，您也可以这样做：

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

但最好不要包含无用/冗余代码

于 2013-06-20T14:00:11.817 回答
3

一个相当简单的解决方案是绑定数据以#blah确定该单击事件是否已被绑定以防止它再次绑定。

$("#blah:not([data-bound])").on('click', function () {
    /* your code */
});
//not using .data to ensure attribute string set for selector use.
$("#blah").attr('data-bound', 'bound');
于 2013-06-20T13:57:57.283 回答
2

您应该将js文件与包含在站点标题中的视图分开：

<script src="yourPath/actions.js"></script>

这通常是正确的方法。

仅在父.php文件中包含一次文件，并消除您遇到的错误。

您loader.php不应包含任何 Javascript 代码。没有必要。

于 2013-06-20T14:12:50.107 回答
1

每次您的sidebarajax 触发时，它都会向页面添加一个脚本，该脚本会向#blah. 因此，当#blah单击时，它会触发每个处理程序。

您可以通过使用普通的旧 javascript 分配 onclick 处理程序来覆盖每次document.getElementById('blah').onclick = yourClickFunction点击事件，或者您可以先关闭点击事件，然后使用 jquery 添加一个新事件

$('#blah').off('click').on('click', yourFunction);

另一个建议是为您的侧边栏链接使用事件委托，所以不要这样做： $('.leftsidebar a').on('click', function(){ 这样做： $('.leftsidebar').on('click', 'a', function(){

这会为所有 40 个左右的链接创建一个处理程序，这样会更有效率。另外，以后添加的任何链接都将自动具有点击处理程序，而无需附加它。

于 2013-06-20T14:20:58.447 回答
0

每次加载内页时，您都在重新绑定blah点击事件。尝试将您的 blah click 移动到您的外部脚本。

于 2013-06-20T13:58:17.287 回答