jQuery, лучшая практика для передачи переменных в DOM?

Question

У меня есть элемент DOM, похожий на всплывающее окно «Просмотреть друзей» на Facebook.У меня есть таблица со списком строк, в которую я могу добавить теги к этим строкам:

<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>

У меня есть следующий javascript:

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

, который получает popupRowId, но не получает исходный элемент для связи сpopupRowId.Я мог бы создать всплывающее окно так, чтобы идентификатор tr ассоциировался с ним:

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

, а затем добавить эту строку в мой JavaScript:

var trRowId = e.currentTarget.parentNode.id;

Это работает, но если я начну добавлятьэлементы моего всплывающего элемента div, так что родительский узел больше не является родительским, он ломается, и мне придется его переписать.

Любой совет будет принят, но способ, которым я это делаюимеет определенный «кодовый запах».Спасибо!

Редактировать: Короткая версия , у меня есть элемент строки, каждый из которых связан с уникальным объектом.Я поставил идентификатор объекта в качестве атрибута.Когда я щелкаю по этому элементу строки, создается (потенциально) сложный элемент DOM, предоставляющий пользователю выбор тегов, связанных с элементом строки.Если я использую «parentNode», чтобы найти строку, по которой щелкнули, то она сломается, если придет мой дизайнер и добавит элементы во всплывающее окно.Каково лучшее решение для этого?Связать идентификатор строки tr с классом «всплывающее», а затем искать класс во всем DOM при добавлении тега?Или поместить идентификатор tr во все элементы div во всплывающем окне, чтобы, даже если мой дизайнер добавил нового родителя, идентификатор распространялся на него?

Answer 1

Я думаю, что нет ничего плохого в добавлении id строки , нажатой во всплывающее окно. Но вы не можете сохранить его как атрибут id, так как они должны быть уникальными. Вместо этого используйте атрибуты данных HTML5, которые также отлично работают со старыми браузерами.

Если вас беспокоит реструктуризация элемента popup, то не следует явно полагаться на отношение parentNode, а вместо этого полагаться, например, на класс popup (который должен быть уникальным во всплывающем однозначный), или конкретный атрибут, оба из которых должны существовать только в корневом всплывающем узле.

Вот поток событий, которые я предлагаю:

1. Пользователь щелкает строку таблицы с id = "124"
2. Показать всплывающее окно и записать там идентификатор - <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

Вы можете попробовать что-то вроде этого:

$(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
});

Answer 3

Я не уверен, какие именно у вас проблемы, но, по крайней мере, вы можете использовать функциональность jQuery для получения идентификаторов:

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