在ajax調用後點擊使用不起作用

Question

$(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); 
       } 
      }); 
     }); 
}); 

當我點擊一個類似它的鏈接工作正常的鏈接時，我點擊與類不同的鏈接時也是如此。然而，當我點擊兩次相同的鏈接時它不起作用！當我在互聯網上搜索時，我發現我必須使用直播而不是點擊，但是在1.8版本上不推薦使用直播。我怎樣才能讓這個火災多次？

Answer 1

使用jQuery.on()：

$(document).on('click', 'a.like', function() { 
    // Do click stuff here 
}); 

http://api.jquery.com/on/

您需要綁定on到一個元素，將永遠存在。 （文檔或一些主包裝div）。使用動態元素on將不起作用。

Answer 2

如果你想使用的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（）。要附加只運行一次，然後刪除自身的事件，請參閱。一（）

Answer 3

$(document).on("click","a.unlike", function() { 

是對活/委派格式。

http://api.jquery.com/live/

Answer 4

之前JavaScript可以Ajax調用工作後，您需要再次如創建的代碼塊的新實例

<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);