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']; 
} 

Если пользователь нажмет пример 3 раза на .notifications-load, то содержимое от /?i=notifications будет загружаться 3 раза в #notifications-holder - как я могу предотвратить это?

Answer 1

Верьте или нет, один символ разницы будет исправить: one функции

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

}); 

JQuery в перехватывает обработчик, который автоматически отцепляется в первый раз, это называется.

Если у вас есть отвращение к использованию 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"); 
     } 
    });