我有一个表格,用户点击图片来阻止/取消阻止用户。这是这样的。
通过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>
答案 0 :(得分:1)
jQuery有自己的数据实现:
您应该使用.data('block', data);
代替.attr('data-block', data);
当你用$(this).find('img').data('block')
如果您知道标签,也不应该像$('.toggle')
那样使用jQuery进行类检测。
在您的示例中,您可以使用$('a.toggle')