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

Question

如何动态地在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（））呢？

感谢您帮助我！

Answer 1

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

Answer 2

如果要添加动态元素，请使用实时函数为新元素附加事件，如下所示：

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