爱华网<td>歌曲ID</td><td>歌曲名</td><td>歌手名</td><td>专辑</th><th>操作</th></tr><tr>
<td>100234</td><td>路太弯</td><td>潘玮柏</td><td>玩酷</td><td><a href="javascript:void(0)"title="删除歌曲"></td></tr></table>
之前使用以下jquery代码实现：//删除歌曲$(".icon-remove").click(function(){
var url ="http://localhost/song/del/id/100234";var this_node = $(this);$.get(url, {},function(ret){});//取消删除$(".icon-remove-circle").click(function(){if(ret==0){alert("删除失败");}else{this_node.removeClass("icon-remove");//去除删除的图标this_node.addClass("icon-remove-circle");//加上取消删除的图标this_node.at【】tr("title","取消删除");}});
var url = "http://localhost/song/undelete/id/100234";var this_node = $(this);$.get(url, {},function(ret){
if(ret==0){
alert("取消失败");
}else{
this_node.removeClass("icon-remove-circle");//去除取消删除的图标this_node.addClass("icon-remove");//加上删除的图标this_node.attr("title","删除歌曲");
}
});});用这种方法的话，删除歌曲成功之后，虽然图标变成了取消删除的图标，但是取消删除时，走的还是$(".icon-remove").click删除歌曲。因为Jquery根本没有劫持到$(".icon-remove-circle").click，这样就一直不能取消删除。后来经过同事的指点，在节点上随便加个属性，如下,<a href="javascript:void(0)" title="删除歌曲"delsong="1">
然后通过获取delsong属性点击事件来执行删除或取消删除即可解决问题。代码如下：$("[delsong]").click(function(){
var this_node = $(this);var delsong =this_node.hasClass("icon-remove");//通过hasClass方法来判断是删除还是取消删除if(delsong){ var url ="http://localhost/song/del/id/100234";
$.get(url,{}, function(ret){if(ret==0){alert("删除失败");}else{this_node.removeClass("icon-remove");//去除删除的图标this_node.addClass("icon-remove-circle");//加上取消删除的图标this_node.attr("title","取消删除");}});
}else{ var url = "http://localhost/song/undelete/id/100234";});$.get(url, {},function(ret){if(ret==0){alert("取消失败");}else{this_node.removeClass("icon-remove-circle");//去除取消删除的图标this_node.addClass("icon-remove");//加上删除的图标this_node.attr("title","删除歌曲");}});}
