如何爲列表中的每個項目創建唯一的Jquery對話框？

Question

我在Jinja2的幫助下用Python構建了一個基於瀏覽器的應用程序，並且希望爲文件列表中的每個項目添加一個對話框。例如，我的Python/Jinja2的生成以下HTML：

<div id="dialog">Unique data goes here.</div> 
... 
<li class="ui-widget-content">something.pdf</li> 
<li class="ui-widget-content">something else.zip</li> 
<li class="ui-widget-content">something else(1).zip</li> 
... 

我想每個<li>是一個調出給Javascript，顯示對話框，併爲每個對話框包含與獨特的信息列表中的文件。這份名單也不斷變化。這裏是JS代碼，我到目前爲止，但這只是帶來了第一個項目列表中的每個<li>標籤：

$.fx.speeds._default = 1000; 
$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     show: "slide", 
     hide: "fade" 
    }); 
}); 
$(document).ready(function(){ 
    $("#selectable").children("li").each(function() { 
     $(this).mouseover(function(){ 
      $(this).css("background-color","#FECA40"); 
     }); 
     $(this).mouseout(function(){ 
      $(this).css("background-color","white"); 
     }); 
     $(this).click(function(){ 
      $("#dialog").dialog("open"); 
      return false; 
    }); 
    }); 
}); 

我很新的Javascript和我在這一個完全喪失。我認爲完成這個的唯一方法是爲每個<div>分配一個獨特的id，然後爲每個id創建相應的功能。由於該列表超過了300個文件，這似乎不是一個聰明的想法。給每個<li>標籤設置自己獨特的對話框的最佳方式是什麼？謝謝！

Answer 1

這是行不通的？

$.fx.speeds._default = 1000; 
$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     show: "slide", 
     hide: "fade" 
    }); 
}); 
$(document).ready(function(){ 
    $("#selectable").children("li").each(function() { 
     $(this).mouseover(function(){ 
      $(this).css("background-color","#FECA40"); 
     }); 
     $(this).mouseout(function(){ 
      $(this).css("background-color","white"); 
     }); 
     $(this).click(function(){ 
      // if no dialog has been created for this li 
      if (!$(this).data('dialog')) { 
       // initialize one 
       $(this).data('dialog', 
        $('<div />') 
         //.text($(this).text()) // set the text of the dialog 
         .load('someurl.php?file=' + encodeURIComponent($(this).text())) // set content by ajax request 
         .dialog({autoOpen: false}) 
      ); 
      } 
      var dlg = $(this).data('dialog'); 
      dlg.dialog("open"); 
      return false; 
    }); 
    }); 
});