Question

我有以下html，动态创建。

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

使用以下jquery，我将ID分配给每个div以及每个div

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

然后我使用指定的ID来触发jquery ui Dialog弹出窗口，但是，我必须重写下面的函数x次。有没有办法创建以下功能，所以我不必重写x次。（x是div可能出现在页面上的最大次数）。

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

Answer 1

听起来像数据属性的理想用途。动态生成<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。< / p>

我做了一个jsFiddle来演示这个概念。我希望它有用：

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

Answer 2

这个怎么样？

<强> HTML

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

<强> JS

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

Answer 3

如果您以后只使用id属性来监听点击次数。为组创建单个事件侦听器更有意义。

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

动态ID /动态函数/ Jquery对话框

3 个答案: