Идентификация динамически генерируемого контента на странице

Question

Каков наилучший способ идентификации динамически генерируемого элемента на странице?

Позволь мне объяснить.У меня есть список элементов, на странице может быть столько элементов, сколько определяет пользователь.Каждый из них соответствует элементу, каждый со своим идентификатором.Теперь у пользователя есть возможность редактировать или удалять эти элементы на странице, и эти операции обрабатываются с помощью jQuery.Каждый элемент имеет ссылку на операцию, которую он может выполнить (например, удалить и отредактировать).

Теперь проблема в том, чтобы знать который элемент, выбранный пользователем.Чтобы справиться с этим, я присваиваю каждой ссылке идентификатор элемента в виде атрибута ID, который затем получаю с помощью jQuery:

 <a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>

  $(".delete").live("click", function(event) {
      event.preventDefault();
      var elementID =  $(this).attr("id");
      //other code
   });

Очевидно, что это далеко от идеала, поскольку это означало бы, что многие элементы DOM могут иметь одинаковый идентификатор.В качестве альтернативы я мог бы создать свой собственный атрибут, например elementID, но я считаю, что это нарушает стандарты.

Итак, что вы могли бы порекомендовать.Как я могу идентифицировать динамически генерируемые элементы на странице?

Answer 1

Я довольно часто делал это для своих сайтов, и мое решение представляет собой комбинацию того, с чего вы начали, и некоторых комментариев:

Используйте соглашение об именовании, например «element_type:id:action».Итак, ваш пример сгенерирован как «element:23:delete».Затем вы можете разделить() полученный вами .attr("id") и определить, что это такое ("отчет" или "папка"), идентификатор и что вы хотите сделать ("удалить", "отредактировать"). ", "двигаться").

Для меня это сработало очень хорошо и очень масштабируемо.

Однако я бы сохранил класс, чтобы вы могли легко прикреплять события через jquery.

Джеймс

Answer 2

Почему бы вместо этого просто не добавить класс.Это также решает проблему наличия нескольких идентификаторов, которая, как вы ускользнули, не разрешена и вызовет серьезные проблемы с последующими операциями jquery.

<a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>

  $(".delete").live("click", function(event) {
      event.preventDefault();
      //other code
      $(yourNewElement).addClass('noob');

   });

Answer 3

Еще одна вещь, которую вы могли бы сделать, это:

<a href="#<%= Model.elementID%>" class="delete"> Delete </a>
$(".delete").live("click", function(event) {
    event.preventDefault();
    var elementID =  $(this).attr("href");
    // strip the preceding '#'

    // rest of your code
});

ПС:не все имеет передовой опыт.Некоторые вещи просто требуют нового подхода.

Приветствую, джрх