值只更新一次,我的jquery代码有什么问题?

时间:2011-10-24 12:38:35

标签: jquery ajax

我有一个表格,用户点击图片来阻止/取消阻止用户。这是这样的。

enter image description here

通过AJAX检索表的html(包括block / unblock的列),因为我使用的是jquery数据表插件。

这里是列block / unblock

的检索html
<td>
    <a class="toggle" href="#toggle">
        <img src="app/css/images/tick.png" alt="Yes" data-id="4" data-block="0">
    </a>
</td>

数据表块表示阻止/解除阻塞的状态,如果值为0,则显示名为tick.png(已启用)的图像,否则为tock.png(已禁用)。

我正在使用以下jQuery来捕获点击并将数据发送到服务器端以获取和进行更改。

$('.toggle').live('click', function() {
    var id = $(this).find('img').data('id');
    var block =  $(this).find('img').data('block');
    $.ajax({
        type: 'POST',
        url:  "app/ajax/User/Block.php",
        data: 'id='+id+'&block='+block,
        success: function(data) {
            var image = (data == 1) ? 'app/css/images/tock.png' : 'app/css/images/tick.png';
            $('.toggle img[data-id="'+id+'"]').attr('data-block', data);
            $('.toggle img[data-id="'+id+'"]').attr('src', image);
        }
    });
});

这是我正在使用的PHP代码。

if(isset($_POST['id']) && isset($_POST['block'])) {
    $userId = $_POST['id'];
    //$_POST['blocks'] holds the current value of block/unblock.
    //toggle the block/unblock state.
    $block = $_POST['block'] == 1 ? 0 : 1;
    User::blockUser(array($userId), $block);
    //Respond back toggled block/unblock value.
    echo $block;
}

如果我单击图像切换状态以便data-block值得到更新,一切正常,问题是我只能点击一次,如果我再次点击同一图像它什么都不做。我检查了控制台中的值,第一次单击后值也没有更新。代码出了什么问题?

更新:

这是在点击之前的第一阶段的HTML。

<a class="toggle" href="#toggle">
    <img src="app/css/images/tick.png" alt="Yes" data-id="4" data-block="0">
</a>

这是点击同一行后的HTML。

<a class="toggle row_selected" href="#toggle">
    <img src="app/css/images/tock.png" alt="Yes" data-id="4" data-block="1">
</a>
//Here the extra class row_selected is added by default by another plugin, do you think this is creating the problem?

并且在第一次点击后再次显示。

<a class="toggle" href="#toggle">
    <img src="app/css/images/tock.png" alt="Yes" data-id="4" data-block="1">
</a>

1 个答案:

答案 0 :(得分:1)

jQuery有自己的数据实现:

您应该使用.data('block', data);代替.attr('data-block', data); 当你用$(this).find('img').data('block')

阅读时

如果您知道标签,也不应该像$('.toggle')那样使用jQuery进行类检测。 在您的示例中,您可以使用$('a.toggle')

轻松提高效果