將數據傳遞給jQuery-UI對話框

Question

通常，我有一個表或一個列表，並且我想在單擊給定行時創建一個事件，並執行特定於點擊行的操作。爲此，我一直在click（）中定義data（）。有時我只發送一段數據，其他時間我發送整行。

我是這樣做的最好方式，還是有更好的方法？把所需的數據發送到對話框，還是發送整個對象（例如，在我的情況下是行），並在對話框中提取數據，最好？

感謝

$("#someTable tbody").on("click", "a.doIt", function() { 
    $("#dialog").data('id',$(this).parent().parent().attr('data-id')).dialog("open"); 
    //$("#dialog").data('id',$(this).parent().parent()).dialog("open"); 
    return false; 
}); 
$("#dialog").dialog({ 
    open  : function() { 
     alert($(this).data('id')+' is available.'); 
     //alert($(this).data('row').attr('data-id')+' is available.'); 
    }, 
    buttons  : [ 
     { 
      text : 'CLOSE', 
      "class" : 'gray', 
      click : function() { 
       alert($(this).data('id')+' is available.'); 
       //alert($(this).data('row').attr('data-id')+' is available.'); 
       $(this).dialog("close"); 
      } 
     } 
    ]  
}); 


<table id="someTable"> 
    <tbody> 
     <tr data-id="123"><td><a href="javascript:void(0)" class="doIt">aaa</a></td><td>bbb</td></tr> 
     <tr data-id="321"><td><a href="javascript:void(0)" class="doIt">ccc</a></td><td>ddd</td></tr> 
     <tr data-id="111"><td><a href="javascript:void(0)" class="doIt">eee</a></td><td>fff</td></tr> 
    </tbody> 
</table> 

Answer 1

可以傳遞數據的UI的對話框這樣

document.getElementById('dialog-modal').innerHTML = '<span style="font-family:sans-serif;font-size:18px">'+str+'</span>'; 
    $("#dialog-modal").dialog({ 
     height: 120, 
     modal: true, 
     resizable:false, 
     buttons: { 
      Ok: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
    $(".ui-dialog-titlebar").hide(); 

你可以改變你想要的ID的innerHTML，然後打開該對話框。

更新：

$("#someTable tbody").on("click", "a.doIt", function() { 
$("#dialog").html($(this).parent().parent().attr('data-id').html()); 

$("#dialog").dialog({ 
     height: 120, 
     modal: true, 
     resizable:false, 
     buttons: { 
      Ok: function() { 
       $(this).dialog("close"); 
      } 
     } 
    });});