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>

我想要的是，当可折叠$data['id']打开时，将AJAX POST请求分派给参数为<div>的其他资源。

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

有人可以帮忙吗？

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将在动画完成时执行。

关于jQuery Mobile Collapse的AJAX请求

1 个答案: