我有以下动态创建的 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,我为每个 a 以及每个 div 分配 ID
$('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");
});
最佳答案
听起来像是数据属性的理想用途。当您动态生成 <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 来演示这个概念。希望对您有所帮助:
关于javascript - 动态 ID/动态函数/Jquery 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19260463/