JQuery UI Dialog: Dynamic OnClick Listener


Problem:

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!


Solution:

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/

Recent Tips

  1. CanĀ“t access google cloud storage with service account. Service account does not have storage.objects.list access
  2. link error to build caffe in osx 10.9
  3. How to use CSS to give a circle a "partial border"
  4. BasicNetwork.performRequest: Unexpected response code 500 for http://192.168.1.195:85/tranxavApi/public/api/signup
  5. Laravel 5.1 Authentication without password
  6. django-bootstrap-v5 DecimalField Throwing Errors in ModelForm Class
  7. update and delete in realm xamarin
  8. Grabbing text between Processing Instructions in XSLT
  9. Foreign key refering to multiple tables
  10. Run a visual studio 2010 Windows7 project on a Windows XP machine
  11. How to apply groupname to HTML radio buttons in asp.net?
  12. What is the most stable modal dialog implementation across browsers to use from javascript for a web app?
  13. Move, Remove, and Replace information from Google Sheets with new entries using Google Script
  14. How can I get rid of jerkiness in WinForms scrolling animation?
  15. Update MySQL table column from another table entities
  16. Shoot fireball once in unity C#
  17. Adding a table of contents to a Microsoft Word Document using vbs
  18. Change locale in android app (onto Hindi)
  19. How do I stop selenium automation if 20% or 1st 20 test cases test methods are failed?
  20. Sharepoint with silverlight app
  21. What's the best way to write robots.txt for github pages using multiple repos?
  22. Biopython: Cant use .count() for biopython
  23. How can I find out the token balance of an address?
  24. ref value is undefined in vue (modal, textarea, $refs)
  25. Azure - HDInsight Hbase Data Insertion Failed
  26. SignalR overwriting OnConnected(), OnDisconnected()
  27. DatePickerDialog displays with two borders
  28. "type 'double' is not a subtype of type 'int' in type cast" error in flutter. What should i do?
  29. hiding the autocomplete list when user click outside the textbox is not working as expected
  30. JSF IceFaces basic problem with redisplaying input value