페이지에서 dyamically 생성 내용을 식별합니다

Question

페이지에서 동적으로 생성 된 요소를 식별하는 가장 좋은 방법은 무엇입니까?

설명하겠습니다. 요소 목록이 있습니다. 사용자가 정의하는만큼 요소가 적거나 많은 요소가있을 수 있습니다. 이들 각각은 자체 ID가있는 항목에 해당합니다. 이제 사용자는 페이지에서 이러한 요소를 편집하거나 삭제할 수 있으며 이러한 작업은 jQuery로 처리됩니다. 각 요소에는 작업 할 수있는 작업 당 링크가 제공됩니다 (예 : 삭제 및 편집).

이제 문제는 알고 있습니다 어느 사용자가 선택한 요소. 이를 다루기 위해 각 링크를 ID 속성으로 요소의 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 요소가 동일한 ID를 가질 수 있음을 의미하기 때문에 분명히 이상적입니다. 또는 ElementID와 같은 내 자신의 속성을 만들 수는 있지만 이것이 표준을 깨뜨린다고 생각합니다.

그래서 당신은 무엇을 추천 할 수 있습니까? 페이지에서 동적으로 생성 된 요소를 어떻게 식별 할 수 있습니까?

Answer 1

나는 내 사이트를 위해 이것을 약간 수행했고 내 솔루션은 당신이 시작한 곳과 의견 중 일부의 조합입니다.

"Element_Type : id : action"과 같은 이름 지정 컨벤션을 사용하십시오. 따라서 예제는 "요소 : 23 : 삭제"로 생성됩니다. 그런 다음, 당신이 잡은 .attr ( "id")를 쪼개고 그것이 무엇인지 ( "보고서"vs "폴더"), ID 및 원하는대로 ( "delete", "edit를 결정할 수 있습니다. ", "이동하다").

이것은 나에게 매우 잘 작동했으며 매우 확장 가능합니다.

그래도 jQuery를 통해 이벤트를 쉽게 첨부 할 수 있도록 수업을 유지합니다.

제임스

Answer 2

대신 수업을 추가하지 않겠습니까? 이것은 또한 여러분이 허용되지 않는 여러 ID를 갖는 문제를 해결하고 후속 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
});

추신 : 모든 것이 모범 사례가 없습니다. 어떤 것들은 단지 새로운 도대체가 필요합니다.

건배, JRH