예기치 않게 하위 요소에서 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와 CSTE 연구진() 이벤트를했다. 그러나, 리 내에서 다양한 divs 있습니다. li 내의 ANYthing을 클릭하면 .on 이벤트가 발생합니다 (예상되는 동작이라고 생각됩니다). li 내부에는 id가 없으므로 alert (event.target.id)는 null을 표시합니다. 관련 ID를 캡처하기 위해 li 내의 각 하위 요소에 ID를 추가해야합니까? 확실히 더 좋은 방법이 있습니다.

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

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

       alert(clickedId); 
      }); 

Answer 1

var clickedId = this.id; 

와

var clickedId = event.target.id; 

당신은 클릭 된 가장 정확한 요소에 관심이 아니에요하지만 li에있는 이벤트 핸들러를 구속하고 있던 교체 클릭 함. 이 요소는 이벤트 핸들러에 this입니다.