0

我目前有一个通过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>

我想要的是将 AJAX POST 请求分派到另一个资源，其中$data['id']包含可折叠<div>打开时的参数。

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

有人可以帮忙吗？

4

1 回答 1

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 将按要求执行。

于 2012-09-09T01:47:27.343 回答