使用动态链接打开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()