jquery .on意外觸發子元素

Question

我從JSON調用中創建元素以構建列表，如下所示。請注意，msg.id用於設置li的id。

   // create variations on somecharacter_id for id so that clicking upon any element reveals associated message id - see clickedId in .on(....) 
       for (i = 0; i < messages.length; i++) { 
        var msg = messages[i]; 
        var msgString = '<li id="' + msg.id + '" class="msgbox todo-content"><div class="todo-icon fui-bubble-16"></div><div class="todo-content"><h4 class="todo-name">'; 
        msgString += msg.sendfrom; 
        msgString += '</h4>' + msg.subject; 
        msgString += '<div style="font-size:x-small;color:#bdc3c7;">' + parseTime(msg.timestamp_string) + '</div></div></li>'; 
        $('#message-list').append(msgString); 
       } 

我希望檢索msg.id對相關行點擊，李給出的類名.msgbox和我一起.msgbox做了。對（）事件。然而，在裏面是各種各樣的divs。當我點擊li中的任何東西時，.on事件觸發（我相信這是預期的行爲）。由於li中沒有id，alert（event.target.id）顯示爲空。我是否應該將id添加到li中的每個子元素以捕獲相關的id？當然有更好的方法。

$('.msgbox').on('click', function (event) {        // example 

       // get id 
       var clickedId = event.target.id; 

       alert(clickedId); 
      }); 

Answer 1

更換

var clickedId = event.target.id; 

與

var clickedId = this.id; 

你不感興趣，這是點擊最精確的元素，但在li上您綁定的事件處理程序，這是點擊。該元素在事件處理程序中是this。