jQuery Mobile Collapse上的AJAX请求

Question

我目前有一个动态的数字，这些数字是用foreach()循环生成的：

<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>

我想要的是，当可折叠的<div>打开时，将AJAX POST请求调度到另一个具有参数$data['id']的资源。

我尝试使用.click方法，但无法使其适用于<div> s的动态列表。我觉得等待动画完成（以确保页面仍然响应）的方法是最好的方法。

有人能帮忙吗？

Answer 1

对于动态生成的内容，我建议您使用.on()方法。以以下代码为例：

$('#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);
            }
        });
    });
}

第一个参数是事件（可以用空格分隔多个事件），而第二个参数可以是目标元素或要执行的函数。在这种情况下，最后一个当然是要执行的函数。

ajax将根据请求在动画完成时执行。