Блог

Я сгенерировал несколько li в строке, чтобы иметь динамическое отображение списка пользователей (подключенных или нет). В конце списка я добавил li это кнопка для отключения.

Проблема в том, что если я добавлю его в свой исходный код по умолчанию, без его генерации, Ajax function работает нормально.

Если я его сгенерирую, он даже не применит preventDefault().

Почему это и как исправить эту проблему?

 function displayUsers() {
    $.ajax({
        url: 'getUsers.php',
        dataType: 'json'
    }).done(function (aUsers) {
        if (aUsers != null) {
            var sUserList = '';
            $.each(aUsers, function (key, oUser) {
                sUserList  = '<li><a href="#"><span class="glyphicon glyphicon-ok" style="color: springgreen;"></span>'   oUser.nickname   '</a></li>';
            });
            sUserList  = '<li class="divider"></li>';
            sUserList  = '<li class="disconnect"><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>Sign Out</a></li>';
            $('ul.dropdown-menu').html(sUserList);
        } else {
            var sNoConnectionMessage = '<li><span class="glyphicon glyphicon-remove-sign" style="color: crimson;"></span>Aucune connexion en cours.</li>';
            sNoConnectionMessage  = '<li class="divider"></li>';
            sNoConnectionMessage  = '<li class="disconnect"><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>Sign Out</a></li>';

            $('ul.dropdown-menu').html(sNoConnectionMessage);
        }
    });
}

setInterval(displayUsers, 1000);

$('li.disconnect a').on('click', function (event) {
    event.preventDefault();    
    $.ajax({
        url: 'logoff.php'
    }).done(function () {
        $('div.LoginChat').removeClass('hide');
        $('div.WriteMessage').addClass('hide');
    })
});
  

Пожалуйста, укажите мне правильный способ достижения моей цели.

Обработчики событий прикреплены к элементам, а не к селекторам.

Когда вы делаете это:

 $('li.disconnect a').on('click', function (event) {
  

jQuery будет определять совпадающие элементы 'li.disconnect a' один и только один раз во время выполнения этой строки кода. Все соответствующие элементы, добавленные в DOM впоследствии, не будут идентифицированы. Чтобы сделать это, вам нужно прикрепить обработчик щелчков к общему родительскому элементу (который не меняется в течение срока службы DOM) и использовать перегрузку .on() , которая фильтрует события от дочерних элементов. Что-то вроде этого:

 $(document).on('click', 'li.disconnect a', function (event) {
  

Это приведет к прикреплению обработчика к document элементу (хотя будет работать любой общий родительский элемент) вместо идентифицированных элементов. Поскольку события «всплывают» через DOM, они в конечном итоге достигнут этого родительского элемента. Затем второй селектор в .on() функции фильтрует эти дочерние элементы, чтобы реагировать только на события щелчка, которые возникли из идентифицированного элемента.

Я написал больше на эту тему здесь.

Используйте делегирование события и делегируйте обработчик щелчка чему-либо, что не восстанавливается, например document :

 $(document).on('click', 'li.disconnect a' function (event) {
    ...
});
  

Проблема в том, что если вы не делегируете что-то более высокому, обработчик событий теряется при уничтожении элемента.