使用動態鏈接打開jQuery UI對話框

Question

我有根據數據庫中的內容動態生成的鏈接。

的聯繫最終看起來像

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

我拼湊起來的腳本是

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

這適用於在列表中的第一篇文章 - 打開的對話框中，但orther文章打開一個單獨的頁面。我假設這是因爲ID不是唯一的。

我的問題更多的是如何爲任何id（比如article1，article2等）創建一個通用的jQuery函數。

我已經在jQuery上進行了大約20分鐘的培訓，所以我在黑暗中拍攝了什麼地方。

謝謝。

Answer 1

這適用於列表中的第一篇文章 - 對話框打開，但 其他文章在單獨的頁面中打開。我假設這是 ，因爲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()