동적 링크로 jQuery UI 대화 상자 열기

Question

DB의 내용을 기반으로 동적으로 생성 된 링크가 있습니다.

링크는 내가 함께 조합해서 스크립트는이 목록의 첫 번째 기사 작동

$(document).ready(function() { 

     $("#article").click(function (e) { 
      InitializeDialog($("#news"), $(this).attr("href")); 
      e.preventDefault(); 
      $("#news").dialog("open"); 
     }); 


     //Method to Initialize the DialogBox 
     function InitializeDialog($element, page) { 

      $element.dialog({ 
           autoOpen: true, 
           width: 400, 
           resizable: false, 
           draggable: true, 
           title: "Update", 
           modal: true, 
           show: 'fold', 
           closeText: 'x', 
           dialogClass: 'alert', 
           closeOnEscape: true, 
           position: "center", 
           open: function (event, ui) { 
            $element.load(page); 
           }, 

           close: function() { 
            $(this).dialog('close'); 
           } 
       }); 
     } 
    }); 

입니다

<ul> 
    <li><a href="/Updates/LoadArticle?NewsId=3" id="article">Article 3</a></li> 
    <li><a href="/Updates/LoadArticle?NewsId=2" id="article">Article 2</a></li> 
    <li><a href="/Updates/LoadArticle?NewsId=1" id="article">Article 1</a></li> 
</ul> 

처럼 보이는 끝낼 - 대화 상자가 열리지 만 orther 기사에서 열 별도의 페이지. ID가 고유하지 않기 때문에 이것이라고 가정합니다.

제 질문은 어떤 id (예 : article1, article2 등)에 대해서도 일반적인 jQuery 함수를 만드는 방법입니다.

나는 약 20 분 동안 jQuery에 대한 교육을 받았으므로 어둠 속에서는 무엇을보아야 할까?

감사합니다.

Answer 1

이 목록의 첫 번째 기사에서 작동합니다. 대화 상자가 열리지 만 orther 기사가 별도의 페이지에서 열립니다. 고유 ID가 아니기 때문에 이라고 가정합니다.

동일한 ID로 2 개 이상의 요소가 잘못된 HTML 형식이므로 문제가 발생합니다.

id 속성을 제거하고 대신 class 속성을 사용하는 대신 다음

<ul> 
    <li><a href="/Updates/LoadArticle?NewsId=3" class="article">Article 3</a></li> 
    <li><a href="/Updates/LoadArticle?NewsId=2" class="article">Article 2</a></li> 
    <li><a href="/Updates/LoadArticle?NewsId=1" class="article">Article 1</a></li> 
</ul> 

을 :

$("#article").click() 

사용 :

$(".article").click()