動態ID /動態函數/ jQuery對話框

我有以下html，動態創建。動態ID /動態函數/ jQuery對話框

<a class="open"></a> 
<div class="dialog"></div> 
<a class="open"></a> 
<div class="dialog"></div> 
<a class="open"></a> 
<div class="dialog"></div> 
<a class="open"></a> 
<div class="dialog"></div>

使用follwing jQuery的，我不過分配的ID給每個藏漢每個格

$('a.open').prop('id', function(i){ 
return '' + (i + 1); 
}); 
$('div.dialog').prop('id', function(i){ 
return 'dialog' + (i + 1); 
});

然後我使用分配的ID的觸發jQuery用戶界面對話框彈出，，我不得不重寫下面的函數x次。有沒有辦法創建下面的函數，所以我不必重寫它多次。（x是div可能出現在頁面上的最大次數）。

$("#1").click(function(){ 
    $("#dialog1").dialog("open"); 
});

來源

2013-10-08 Mark

聽起來像數據屬性的理想用法。當您動態生成<a>標籤，將它們分配數據屬性，像這樣：

<a class="open" data-openNumber="1"></a>

（您也可以通過jQuery做到這一點，當然）。

然後，所有你需要做的就是寫一個單一的點擊處理程序：

$('body').on('click', '.open', function(){ 
    var num = $(this).data('openNumber'); 
    $('#dialog'+num).dialog('open'); 
});

請注意，我不重視處理程序直接與open類元素;如果我這樣做，每次元素動態創建時，我都必須這樣做。相反，我附加處理程序的身體，並過濾器它按類open;這樣我就不必重新聲明那個點擊處理程序。如果你有一個更方便的封閉類，你可以使用它來代替body，但不知道你的頁面結構，我不知道那個元素是什麼，所以我只用了body。

我做了一個jsFiddle來演示這個概念。我希望這是有幫助的：

http://jsfiddle.net/Jammerwoch/Z9U67/

來源

2013-10-08 23:44:45

感謝您的快速響應，這一直在困擾着我整天，必須對解決方案進行硬編碼，我會在早上第一時間給你答案，當我嘗試這個。 – Mark

這個是什麼？

HTML

<a class"open" data-id="1">open</a> 
<div class="dialog" data-id="1"></div>

$(document).on("click", ".open", function(e) { 
    var id = $(this).data("id"); 
    $(".dialog[data-id="+ id +"]").dialog("open"); 
});

來源

2013-10-08 23:46:45

如果你只使用id屬性監聽點擊以後。爲組創建單個事件偵聽器更有意義。

$("a.open").on("click", function(){ 
    $(this).find(".dialog").dialog("open") 
});

來源

2013-10-08 23:46:46

動態ID /動態函數/ jQuery對話框

回答

相關問題