Question

I have some jQuery effects (slideUp(), etc.) that work just fine.

Now I .load() after a setTimeout the div in there and the effects no longer work.

This is because the div’s didn’t exist before the .load() I presume.

The effects and the .load() are both in the same JS file and are all wrapped in jQuery(document).ready(function($) { /*They are here*/ });

How can I invoke those effects on those divs after the are .load()‘ed in?

Answer 1

Since you didn’t post the code setting the .slideUp() method etc. I’m assuming you have something like this:

$(function) () {

   $('.class').slideUp(300);
   $('.wrapper').load('someurl.html'); // this loads some elements with .class
   // these elements won't get slideUp applied because they are not in the DOM at the time of the slideUp call


)};

You need to set the events/functions in the load call back:

$('#result').load('ajax/test.html', function() {
  //apply events to new elements
  $('.class').slideUp(300);  // this would be inside a click event I'm assuming
});

Or as mentioned in the comments… You can (should) be using .on which can handle delegation. My point is to try and help you understand why the events are not applied