JQuery UI Dialog: Dynamic OnClick Listener

2
votes

How to start an OnClick event for an UI Dialog in JQuery dynamically ?

Every SVG-rect element (1,2,...,1000) should be able to open this dialog, while a parameter or ID should be submitted as well to identify which svg was clicked.

The relevant JS code looks like this:

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

The relevant HTML Code looks like this:

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

The problem comes from this example where you can find the full source code: http://jqueryui.com/dialog/#modal-form

Imagine you would have 1000 different buttons.

Any idea? I guess using a simple onClick would be a solution, but how to start the .click(function()) then?

Thank you for helping me!

2
javascriptjquerydynamicmodal-dialogonclicklistener

2 Answers

1
votes

Either bind click to rect or add a class to rect and bind click event to the class.

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

If it is a dynamically added element, use .on():

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

DEMO: http://jsfiddle.net/dirtyd77/Fdc6b/1/

-3
votes

if you want to add dynamic elements, use live function to attache events for new elements like this : 

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