$(document).ready(function () {
var user = 1;
$("a.like").on("click", function () {
var article = $(this).attr('data-article');
$.ajax({
type: "POST",
url: "WebService.asmx/Like",
data: "{ 'user': '" + user + "', 'article': '" + article + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if(msg.d == 1)
{
$(".like[data-article='" + article + "']").fadeOut(700).addClass('unlike').removeClass('like').stop().text('Unlike').fadeIn(700);
}
},
failure: function (msg) {
alert(msg.d);
}
});
});
$("a.unlike").on("click", function () {
var article = $(this).attr('data-article');
$.ajax({
type: "POST",
url: "WebService.asmx/Unlike",
data: "{ 'user': '" + user + "', 'article': '" + article + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if(msg.d == 1)
{
$(".unlike[data-article='" + article + "']").fadeOut(700).addClass('like').removeClass('unlike').stop().text('Like').fadeIn(700);
}
},
failure: function (msg) {
alert(msg.d);
}
});
});
});
当我点击类的链接时它工作正常,当我点击类不同的链接时也一样。但是,当我点击两次相同的链接时,它无法正常工作!当我在互联网上搜索时,我发现我必须使用live而不是click,但是在1.8版本上不赞成live。我怎样才能多次发生火灾?
答案 0 :(得分:10)
使用jQuery.on()
:
$( document ).on( 'click', 'a.like', function () {
// Do click stuff here
} );
您需要将on
绑定到始终存在的元素。 (文件或一些主要的包装div)。将on
与动态元素一起使用将无效。
答案 1 :(得分:5)
如果您想使用on
代替live
,则需要编写类似
$('#container').on('click', '.a.unlike', function () {
由于
$("a.like").on("click", function () {
在弃用之前就像bind()
一样工作。
如果您希望on()
充当live()
,则需要传递3个参数,如第一个示例所示。
.on()方法将事件处理程序附加到jQuery对象中当前选定的元素集。从jQuery 1.7开始,.on()方法提供了附加事件处理程序所需的所有功能。有关从旧的jQuery事件方法转换的帮助,请参阅.bind(),.delegate()和.live()。要删除与.on()绑定的事件,请参阅.off()。要附加仅运行一次然后自行删除的事件,请参阅.one()
答案 2 :(得分:1)
答案 3 :(得分:0)
在javascript调用之后javascript可以工作之前,你需要再次创建你的代码块的新实例,例如
<div class="clicks">
//Ajax results comes here. For instance if we have sets of <a>Click me</a>, all we need to do is, when the call is successful we should construct our block of codes again because after document loads, javascript only read already existing elements.
</div>
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");`
}
xhttp.onreadystatechange = function() {
if(xhttp.readyState === 4 && xhttp.status === 200){
$('.clicks').html(xhttp.responseText);
//now re-create your functions here
$('.clicks a').click(function(){
alert('clicks worked after ajax call');
});
}
};
xhttp.open("GET","index.html",true);
xhttp.send(null);