1

我有以下动态创建的 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 分配给每个 a 以及每个 div

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

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

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

3 回答 3

2

听起来像是数据属性的理想用途。当您动态生成<a>标签时，为它们分配一个数据属性，如下所示：

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

（当然，您也可以通过 jQuery 执行此操作）。

然后您所要做的就是编写一个单击处理程序：

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

请注意，我不会将处理程序直接附加到具有 class 的元素open；如果我这样做了，每次动态创建元素时我都必须这样做。相反，我将处理程序附加到主体，并按类过滤它open；这样我就不必继续重新声明该点击处理程序。如果你有一个更方便的封闭类，你可以使用它来代替body，但不知道你的页面结构，我不知道那个元素是什么，所以我只使用了body.

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

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

于 2013-10-08T23:44:45.440 回答
1

那这个呢？

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");
});
于 2013-10-08T23:46:45.220 回答
1

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

$("a.open").on("click", function(){
    $(this).find(".dialog").dialog("open")
});
于 2013-10-08T23:46:46.013 回答