jQuery, DOM에서 변수를 전달하는 가장 좋은 방법은 무엇입니까?

Question

Facebook의 '친구보기'팝업과 비슷한 DOM 요소가 있습니다.

<tr id="124"></tr> 

행이 생성하고 사용자가 그들이 그와 관련된 원하는 태그를 선택할 수있는 모달 팝업 거기를 클릭 : 나는 그 행에 태그를 추가 할 수있는 행의 목록과 테이블이 종류의이 같은 행 :

<div class="popup"> 
    <div class="popup-body-row" id="3434">Add tag 3434</div> 
    <div class="popup-body-row" id="2112">Add tag 2112</div> 
    //etc. 
</div> 

I가 다음과 같은 자바 스크립트 다음 popupRowId를 얻을 수 있지만, popupRowId와 연결할 원래 요소를하지 않습니다

$('.popup-body-row').live('click', function(event) { 
     var popupRowId = event.currentTarget.id 
     // post for sending this to the server omitted 
    }); 

.

<div class="popup" id="124"> 
// everything else is same as before 
</div> 

을 그리고 내 자바 스크립트에이 줄을 추가 : 나는 그럴 ID가 그와 연관된되도록 팝업을 만들 수 작동

var trRowId = e.currentTarget.parentNode.id; 

,하지만 난 내 팝업에 요소를 추가하기 시작하면 부모 노드가 더 이상 부모 노드가 아니므로 div가 깨져서 다시 작성해야합니다.

모든 조언을 주시면 감사하겠습니다.하지만 내가 수행하는 방식에는 특정 "코드 냄새"가 있습니다. 감사!

편집 : 짧은 버전, 각 요소에는 고유 한 개체가 연결되어 있습니다. 객체의 id를 속성으로 둡니다. 해당 행 요소를 클릭하면 (잠재적으로) 복잡한 DOM 요소가 작성되어 사용자에게 행 요소와 관련된 태그를 선택할 수 있습니다. "parentNode"를 사용하여 클릭 한 행을 찾으려면 내 디자이너가오고 팝업에 요소를 추가하면 중단됩니다. 이것에 가장 적합한 솔루션은 무엇입니까? tr 행 ID를 "popup"클래스와 연결 한 다음 태그가 추가 될 때 전체 DOM에서 클래스를 검색 하시겠습니까? 또는 내 디자이너가 새 부모를 추가하더라도 팝업에서 모든 div 요소에 tr id를 넣으면이 ID가이 속성에 전파됩니까?

Answer 1

나는 아무 문제가 의 id 클릭 추가로 없다 생각 행을 팝업하십시오. 그러나 고유 한 것으로 가정되는 id 속성과 같이 저장할 수는 없습니다. 대신 오래된 브라우저에서도 완벽하게 작동하는 HTML5의 데이터 속성을 사용하십시오.

당신이 popup 사업부의 구조 조정에 대해 걱정하는 경우, parentNode 관계를 명시 적으로 의존하지 않는 대신 (동음이의 팝업 내에서 고유해야합니다) 예를 들어 popup 클래스에 의존하거나, 특정 속성은 이어야하며은 루트 팝업 노드에만 존재해야합니다.여기

내가 제안하고있어 이벤트의 흐름입니다 :

1. 사용자가 ID로 = "124"
2. 표시 팝업 테이블 행을 클릭하고이 ID를 기록 - <div class="popup" data-current-row="124">..
3. 때 내부 행 팝업이 클릭 된 다음 속성이 data-current-row 인 가장 가까운 상위를 찾아 해당 값을 가져옵니다.

설정 팝업 라이브 클릭 핸들러로 :

$('.popup-body-row').live('click', function() { 
    // by searching for closest popup, you break the 
    // explicit parentNode relationship. By storing the data 
    // inside an HTML5 data attribute, you are not duplicating id's. 
    // Basically, a win-win situation for all. 
    var popup = $(this).closest('[data-current-row]'); 
    var associatedRowId = popup.attr('data-current-row'); 
}); 

Answer 2

난 당신이있어 정확한 문제가 무엇을 잘 모르겠어요하지만 적어도 당신은 ID를 얻기 위해 jQuery를 기능을 사용할 수 있습니다

$('.popup-body-row').live('click', function(event) { 
    var popupRowId = $(this).attr('id'); 
    var trRowId = $(this).parent().attr('id'); 
}); 

Answer 3

이 같은 시도 할 수 :

$(document).delegate('.popup-body-row', 'click', function(e) { 
    var 
     me = $(this), 
     id = me.attr('id'), 
     rowId = me.closest('tr').attr('id'); 

    // Do something with them 
}); 

어쩌면