JQuery .click（）不能與模板一起工作

Question

這是我的ajax函數，它具有var模板變量。

$.ajax({ 
type: "GET", 
url: "/Home/GetComment", 
dataType: "JSON", 
success: 
    function (comments) { 
     for (var i = 0; i < comments.length; i++) 
     { 

      var template = '<a id="like_button" class="like-comment" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a>' 
     } 

    } 
}); 


$("#like_button").click(function (evt) { 
    $.ajax({ 
     type: "POST", 
     url: "/Home/AddLikes", 
     data: { "likeid": id }, 
     dataType: "JSON", 
     success: 
      function() { 
       alert('alert'); 
      } 
    }); 
}); 

此點擊功能是不使用該模板的工作，但如果我採取相同的模板，並把它放在我的索引視圖，然後點擊功能的工作原理。

這是在索引視圖代碼它具有相同的ID作爲一個模板：

<a id="like_button" class="like-comment" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a> 

Answer 1

代表事件：

$(document).on('click', "#like_button", function (evt) { 

，改變你的VAR id到class：

var template = '<a class="like-comment like_button" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a>' 

---

當你的錨是動態生成的，所以這是不綁定的直接事件，它直接在文檔中可用，所以要解決這個問題

你必須找出這個元素可能是最接近的靜態父一個div分配給它一些特定的類或$(document), $(document.body)它總是可用於委託事件。

Answer 2

我認爲，目前你已經複製id，你應該使用類，而不是你的按鈕：

var template = '<a class="like_button" class="like-comment" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a>' 

然後你可以使用event delegation附加事件動態加載的元素：

事件委託允許我們將一個事件偵聽器附加到父元素 ，該子元素將針對所有匹配選擇器的子元素觸發， 這些子元素是否現在存在或將來是否添加。

$('body').on('click','.like_button',function() { 
    // Your code here 
}); 

Answer 3

當定義點擊方法jQuery函數執行，按鈕尚未創建！ 您必須將click方法添加到已存在的元素中（body始終存在）。

所以下面的函數顯示爲： 當你點擊body時，找到like_button（如果它存在）並單擊它（委託事件）:)。

$("body").on("click", "#like_button", function (evt) { 
    $.ajax({ 
     type: "POST", 
     url: "/Home/AddLikes", 
     data: { "likeid": id }, 
     dataType: "JSON", 
     success: 
      function() { 
       alert('alert'); 
      } 
    }); 
}); 

Answer 4

試試這個

$("body").on("click", "#like_button", function (evt) { 
    $.ajax({ 
     type: "POST", 
     url: "/Home/AddLikes", 
     data: { "likeid": id }, 
     dataType: "JSON", 
     success: 
      function() { 
       alert('alert'); 
      } 
    }); 
}); 

Answer 5

的html代碼：

<div id="cntr"></div> 

JS代碼：

$(document).ready(function(){ 
$.ajax({ 
    type: "GET", 
    url: "/Home/GetComment", 
    dataType: "JSON", 
    success: function (comments) { 
     var template = ''; 
     for (var i = 0; i < comments.length; i++) { 

      template += '<a id="like_button" class="like-comment" href="#">Like  <span class="glyphicon glyphicon-thumbs-up"></span></a>' 
     } 

     $('#cntr').html(template); 
     addEvent(); 
    } 
    }); 

function addEvent() { 
    $("#like_button").on('click', function (evt) { 
     $.ajax({ 
      type: "POST", 
      url: "/Home/AddLikes", 
      data: { "likeid": id }, 
      dataType: "JSON", 
      success: function (d) { 
       alert('Here'); 
      } 
     }); 
    }); 
    } 
});