jQuery - 从另一个页面加载内容 - 只有一次

Question

我有这个小脚本，当点击它时，它将显示来自我做PHP查询的页面的内容。我的问题是，如果用户点击乘次，它只会加载从PHP页面乘法时间以及内容...

这是我的jQuery代码：

$('.notifications-load').on('click',function() { 
     $('#notifications-holder').load("/?i=notifications"); 

    }); 

而我的HTML：

<i class="fa fa-bell notifications-load"><span class="notification">5</span></i> 
<div id="notifications-holder"></div> 

这是PHP页面（I =通知？）：

$n=$dbh->prepare("SELECT * FROM users_notifications WHERE userid=0 OR userid=:userid"); 
$n->bindParam(":userid",$userdata['id']); 
$n->execute(); 

$data=$n->fetchAll(); 
foreach ($data as $value) { 
echo $value['text']; 
} 

如果用户点击例如.notifications-load上的3次，然后从/?i=notifications的内容将加载3次到#notifications-holder - 我该如何防止？

Answer 1

信不信由你，区别的一个字符将修复它：

$('.notifications-load').one('click',function() { 
// Here -------------------^ 
    $('#notifications-holder').load("/?i=notifications"); 

}); 

jQuery的one功能挂接一个处理程序，它会自动脱钩第一次，它被称为。

如果你有一个厌恶使用one（如一些做的，这是真的容易误读它作为on），你有两个选择：

1. 你可以为它创建一个别名：

   $.fn.onOnce = $.fn.one; 
   

2. 可以明确脱钩处理程序：

   $('.notifications-load').on('click.load',function() { 
       $('#notifications-holder').load("/?i=notifications"); 
       $('.notifications-load').off('click.load'); 
   }); 
   

Answer 2

除了使用$.one你可以检查看看$('#notifications-holder')已经有一个值。例如：

$('.notifications-load').on('click',function() { 
     var notification = $('#notifications-holder'); 
     if (!notification.html().trim().length) { 
      notification.load("/?i=notifications"); 
     } 
    });