JQuery UI对话框:动态OnClick监听器

JQuery UI Dialog: Dynamic OnClick Listener

本文关键字：OnClick 监听器 动态 UI 对话框 JQuery      更新时间：2023-09-26

如何在JQuery中动态启动UI对话框的OnClick事件?

每个svg -rect元素(1,2，…，1000)都应该能够打开这个对话框，同时也应该提交一个参数或ID来标识哪个svg被点击了。

相关的JS代码如下所示: 
$(function() {
    $( "#request_1" )
        .click(function() {
            createForm();
            $( "#dialog-form" ).dialog( "open" );       
    });
/*....*/
};

相关的HTML代码如下所示:

<svg version="1.1" width="720" height="125">
    <rect id="request_1" x="180.5" y="15" width="39" height="15">
    </rect>
</svg>
<svg version="1.1" width="720" height="125">
    <rect id="request_2" x="180.5" y="15" width="39" height="15">
    </rect>
</svg>
/*[...]*/
<svg version="1.1" width="720" height="125">
    <rect id="request_1000" x="180.5" y="15" width="39" height="15">
    </rect>
</svg>

这个问题来自这个例子，你可以找到完整的源代码:http://jqueryui.com/dialog/modal-form

想象一下你有1000个不同的按钮。

任何想法?我想使用一个简单的onClick将是一个解决方案，但如何启动。click(function())然后?

谢谢你的帮助!

可以将click绑定到rect，也可以在rect上添加一个类，并将click事件绑定到该类。

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

如果是动态添加的元素，则使用.on():

$(document).on('click', 'rect', function() {
  $( "#dialog" ).dialog( "open" );
});

演示:http://jsfiddle.net/dirtyd77/Fdc6b/1/

如果你想添加动态元素，使用live函数为新元素附加事件，像这样:

$(function() {
    $( "#request_1" ).live('click',function() {
            createForm();
            $( "#dialog-form" ).dialog( "open" );       
    });
/*....*/
};
相关文章：