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"); 
     } 
    });