Question

I currently have a dynamic number of these being generated with a foreach() loop:

<div id="<?php echo $data['id']; ?>" data-role="collapsible" data-theme="a">
    <h1 style="white-space: normal"><?php echo $data['text']; ?></h1>
    <center>
        <p><?php echo $data['text']; ?></p>
    </center>
</div>

What I want, is for an AJAX POST request to be dispatched to another resource with the parameters of $data['id'] when the collapsible <div> opens.

I tried using a .click method, but I was not able to make it work for a dynamic list of <div>s. I feel a method that waited until the animation was done (as to ensure the page is still responsive) is the best way.

Can someone please help with this?

Answer 1

For dynamically generated content, I would suggest you use the .on() method. Take for example the following code:

$('#container').on('click', 'div', function() {
    var id = $(this).attr('id');
    $(this).animate({
        your animation
    }, 5000, function() {
        $.ajax({
            url: "another_resource.php",
            type: "POST",
            data: {
                id: id
            }, //data to be sent
            dataType: "text", //return data type
            async: false,
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log(data);
            }
        });
    });
}

The first parameter is the event(s)(can be space delimited for multiple events), while the second can either be the targeted element, or the function to execute. The last, in this case, is of course the function to execute.

The ajax will execute when the animation is complete, as requested.