Multiple jQuery plugin instances in ajax-loaded html

Question

I am using multiple Blueimp File Upload plugins in ajax-loaded html :

$('.edit').click(function(){
    $( "#details" ).show();
    $('#details div').html(ajax_spinner).load(script.php, "parameters");
});

So when you click something class="edit" a new div id="details" is shown (but it was in the DOM when document.ready) and script.php returns a form id="upload" (which is never visible in "view source", although it is there in the page..?

What is the rule/good practice for dealing with html added after the document.ready?

So now there is a new element in this "virtual DOM" :

<form id="upload" method="post" action="other_script.php" enctype="multipart/form-data">

  <div id="drop">
    DROP HERE <small>Image .png or .jpg</small>
    <a class="btn mr_button">Browse</a>
    <input type="file" name="upl" />
  </div>
  <ul id="mr_uploaded_files_ul">
    <!-- The global progress bar -->
    <div id="progress" class="progress">
      <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The file uploads will be shown here -->
  </ul>
</form>

And when I try to act upon this "invisible" part of the DOM :

$('#drop a').click(function(){
    alert('Nope. Nothing');
});

Only when I

$(document).on('click', '#drop a', function() {
    alert('Ah, this works');
});

But I need more than an alert. The whole $('#upload').fileupload({ ... }) callback suite is not executed, probably because of this DOM "existence" issue. BTW I use this very implementation in other pages, on plain existing DOM, and it works.

How can I act upon those newly-spawned DOM elements?

Rennes

Answer 1

Add a callback function to your load call, and then initialize your form.

$('#details div').html(ajax_spinner).load(script.php, "parameters", function() {
    $('#upload').fileupload({ ... });
});

When you use a jQuery selector, like $('#upload'), those elements have to already exist. The upload form doesn't exist until after it's been loaded, so that selector returns empty until after the load finishes.

The reason the alert works

$(document).on('click', '#drop a', function() {
    alert('Ah, this works');
});

is due to event delegation. Read more here: http://learn.jquery.com/events/event-delegation/

Codex

Hi, furydevoid. I tried that, and can't get it to return anything after the add: callback... It very much can be the plugin itself... Why can't I even see anything in the FireBug console ? Note that when I do call the plugin from within the callback, nothing changes in the source... – Rennes

Could you elaborate on what you mean by 'return'? It's an async operation, so it won't return anything to outer code. The plugin could be broken, as well -- – Codex

Well, if I put a console_log('something'); in the add: callback of the fileupload({ ... }) function, I will see it IF the form is not ajax-loaded. And putting this function in the html load callback does not change this. I so hoped it would. – Rennes

I guess, since only event delegation works, my question is now "how can I delegate the whole $('#upload').fileupload({ ... }); function?" – Rennes

You can't, you can only catch delegated events. You'll have to initialize the upload plugin after the new dom elements have been loaded, if the plugin is functioning correctly. If you can provide a complete example, I can look at it later and help to explain. – Codex

Your answer seem to say that if you use the callback in a .load() function at all, the content returned will "exist" (ie be visible in the source). Is that what you meant? – Rennes

Yes -- the point of the callback in the .load jquery function is that the callback is called after the new content is in the DOM. The source code is just a blueprint for the browser to initialize the DOM. Think of it as a big object in memory that has a lot more to it than the source HTML. Here's a little explanation of it: css-tricks.com/dom – Codex

+1 for that last info. My problem is not solved :( but I learned something big (view source is NOT the DOM) thanks. – Rennes