jQuery不工作的jQuery生成的HTML標記

我生成了多個li在一個字符串中有一個用戶列表（連接或不）的動態顯示。在列表末尾，我添加了一個li這是要斷開連接的按鈕。jQuery不工作的jQuery生成的HTML標記

問題是，如果我在默認情況下將其添加到我的原始代碼中，而不生成它，則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'); 
    }) 
});

請指導我實現我的目標的正確方法。

來源

2014-07-05 user3807702

事件處理程序附加到元素，而不是選擇器。

當你這樣做：

$('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()函數中的第二個選擇器然後過濾這些子元素，僅響應點擊來自已標識元素的事件。

我已經寫了更多關於這個主題here。

來源

2014-07-05 12:40:57 David

非常感謝！ :) – user3807702

使用Event Delegation並委派單擊處理的東西，沒有得到再生，如document：

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

的問題是，如果你不授人以更高的東西，在事件處理程序丟失當你摧毀元素。

來源

2014-07-05 12:41:11 MrCode

非常感謝！ :) – user3807702

jQuery不工作的jQuery生成的HTML標記

回答

相關問題