How to bind jquery function to a dynamic DOM

Question

I am using jquery file upload function on my page like following:

$('.new-variant-image')
 .fileupload({ 
       dataType: 'script',
       add: function(e, data){ 
       }
});

but the DOM class "new-variant-image" is dynamically created after the page is loaded, so it wouldn't work. I searched ways to bind dynamic event using "on" and "live" but wouldn't get it to work in this case.

Any assistance will be much thanked.

Edit

The DOM element "new-variant-image" is created afterwards using AJAX, it works if I put the code after the element is created. BUT I want to avoid that, because when I call the function using ajax multiple times it cause the browser to hang about 2 to 3 seconds.

When calling a method on an jQuery selector the selector must return an element. As you correctly noted that doesn't work if the element is dynamically added. Using `on` with delegation won't be doing you any good here as you are not looking to bind to an event but rather looking to execute a method against an element. You will have to call `.fileupload` once you have loaded the element. If you are calling the ajax call multiple times you will also have to re-execute the `.fileupload` as each time you re-add the element the plug-in association to the element is destroyed. — Nope, Apr 07 '13 at 09:36
@user1883793: You might need to look at slightly re-designing the logic around the AJAX call to load the sets of elements differently, preventing re-loading some of the element or if possible, maybe you could call a method after **all** the AJAX calls are done and do the file upload association with the element within that method. — Nope, Apr 07 '13 at 09:44

score 0 · Accepted Answer · answered Apr 07 '13 at 09:24

0

Use the function's callback

$('.new-variant-image').fileupload({
      dataType: 'script',
     add: function(e, data),
     done: $('.new-variant-image').click(function(){
     })
{

answered Apr 07 '13 at 09:24

Georgi-it

3,676
1
20
23

Would this work if I put it before the DOM (.new-variant-image)creations? Thanks – user1883793 Apr 07 '13 at 09:35
i dont know what you mean but basically it will work only if the done: function is executed after the DOM element .new-variant-image exists. – Georgi-it Apr 07 '13 at 09:38

score 0 · Answer 2 · edited Nov 29 '14 at 19:40

0

Your code $('.new-variant-image').fileupload({ dataType: 'script', add: function(e, data){ should be after the element creation code ....

I don't know how you are creating the element(using ajax or something else)...

What georgi-it has suggested should work...

edited Nov 29 '14 at 19:40

T J

42,762
13
83
138

answered Apr 07 '13 at 09:27

Shrey

569
5
14

Hi, The DOM element "new-variant-image" is created afterwards using AJAX, it works if I put the code after the element is created. BUT I want to avoid that, because when I called the function using ajax multiple times it cause the browser to hang about 2 to 3 seconds. – user1883793 Apr 07 '13 at 09:36

score 0 · Answer 3 · answered Jan 15 '15 at 19:56

Although very late to answer this question, but as of jQuery 1.7 you can use jQuery.fn.on.

$(document).on("click", ".new-variant-image", function () {
    $('.new-variant-image')
            .fileupload({
                dataType: 'script',
                add: function (e, data) {
                }
            });
})

This attaches event handler function for all present elements or dynamically appended element with class new-variant-image.

How to bind jquery function to a dynamic DOM

3 Answers3

Linked