How to animate dynamically created folding sets in jQuery Mobile

Question

I am currently creating an application that receives data from a server and then dynamically creates dumped items. Now I have a code that allows the animation of opening and closing folding elements throughout the application:

$('[data-role="collapsible"]').bind('expand', function () { $(this).children().slideDown(500); }).bind('collapse', function () { $(this).children().next().slideUp(500); }); 

Now this code does not work with dynamically created dumped elements. So I tried to do the following:

 $(document).on('pagechange','#resultssearch', function() { $('[data-role="collapsible"]').bind('expand', function () { $(this).children().slideDown(500); }).bind('collapse', function () { $(this).children().next().slideUp(500); }); }); 

So, on the page where the dynamic folding elements are added, I tried to add the above page event. But some of them also do not work. How will I be dynamically generated for animation?

As shown in the suggested answers, the code that works is defined as:

 $(document).on('expand', '[data-role="collapsible"]', function () { $(this).children().slideDown(500); }).on('collapse', '[data-role="collapsible"]', function () { $(this).children().next().slideUp(500); }); 

Whatever it is 100%. Events of childhood collapses ultimately affect parental collapses, this can be seen here . Is there a way to stop children from doing routine work?

Answer 1

Delegation of events, my friend. You will have to bind this element to either the static parent or the document . If you dynamically add an assembly, adding an event to an element that does not exist at that particular point in time is pointless. The approach here is that you add the expand and collapse event to the immediate parent (which already exists in pagechange (or rather use pageshow )) or add it to the document that exists all the time, for example:

  $(document).on('expand', '[data-role="collapsible"]', function () { $(this).children().slideDown(500); }).on('collapse', '[data-role="collapsible"]', function () { $(this).children().next().slideUp(500); }); 

Or just attach them like this:

 $(document).on({ "expand": function () { $(this).children().slideDown(500); }, "collapse": function () { $(this).children().next().slideUp(500); } }, '[data-role="collapsible"]'); 

Additional information in the documents

Answer 2

Can't you just add delegation?

 $('body').on('expand','[data-role="collapsible"]', function () { $(this).children().slideDown(500); }).bind('collapse', function () { $(this).children().next().slideUp(500); }); 

This means that every [data-role ..... mapping will be fired because in fact the body has an event on it, it just basically sends it to the child.

Answer 3

The fix simply changes “children” to “children”, so it only deals with one “generation”

 $(document).on('expand', '[data-role="collapsible"]', function () { $(this).child().slideDown(500); }).on('collapse', '[data-role="collapsible"]', function () { $(this).child().next().slideUp(500); });