阿賈克斯工作僅在第一次

在我笨的應用程序，是一種社交網絡演示的，正在開發的Like按鈕。

使用foreach循環讀取帖子時，每個帖子後都會顯示一個類似按鈕。第一次正常工作：Ajax將數據發送到codeigniter方法，數據被插入到表格中，並且按鈕變爲綠色（成功）。然後它停止工作。即使我刷新頁面，呼叫也不會被觸發。

我試圖做：

見過的堆棧溢出和其他論壇中的所有其他的答案，但沒有一個固定的問題。無論如何，codeigniter部分是正確的，問題出在我的Ajax調用。

爲簡化調試目的，現在我有一個非常簡單的Ajax功能，服務器端禁用，唯一需要做的就是在點擊按鈕時使它們變成綠色。又一次它只能在第一時間，然後不工作了......

這是HTML：

<button id="button_like" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span> Like</button>

這Ajax調用：

$('#button_like').click(function(e) { 

e.preventDefault(); 

// alert('click'); 

var data = { 
    user_id: '5', // for debug 
    post_id: '6', // for debug 
    ajax: '1' 

}; 

$.ajax({ 

    url: "<?php echo site_url('post/like'); ?>", 
    type: 'POST', 
    data: data, 
    success: function() { 
    $('#button_like').replaceWith('<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>'); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert("Status: " + textStatus); alert("Error: " + errorThrown); 
     }, 

}); 

// return false;

}）;

這個問題：

我該怎麼做才能使一個簡單的Ajax調用的工作每次？

非常感謝！

編輯：你們所有的答案

感謝。我已經做了button_like類而不是ID。

<button type="submit" class="btn btn-primary button_like"><span class="glyphicon glyphicon-thumbs-up"></span> Like</button>

然後調用這樣的功能：

$('.button_like').on('click', function(e) {

並以這種方式取得成功：

success: function() { 
    $('.button_like').replaceWith('<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>'); 
    },

但現在，點擊一個按鈕後，它使綠色ALL按鈕。我如何才能使綠色只有一個我點擊？謝謝！

編輯2：

我已經重新創建的情況在這個Jsbin：

http://jsbin.com/xulaxowa/1/edit

來源

2014-03-24 johnnyfittizio

你用另一個按鈕替換按鈕，你期望什麼？該按鈕現在消失了，新按鈕沒有事件處理程序。 – adeneo

我覺得你應該改變按鈕類型提交按鈕，並編寫形式代碼 –

ID後，提出必須對JavaScript的唯一，嘗試通過 – radia

好球員，我以這種方式已經解決。

然後在Ajax函數中，我檢測當前的ID並只修改這個元素。你可以看到這個工作例子：

$('.button_like').on('click', function(e) { 

e.preventDefault(); 

//Grab the current button's ID property 
var clicked = $(this).attr('id'); 

//Alert the ID 
alert(clicked); 

var data = { 
    user_id: '5', 
    post_id: '6', 
    ajax: '1' 

}; 


$.ajax({ 

    url: "<?php echo site_url('post/like'); ?>", 
    type: 'POST', 
    data: data, 
    cache: false, 
    success: function() { 
    $('#'+clicked).replaceWith('<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>'); 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
      alert("Status: " + textStatus); alert("Error: " + errorThrown); 
     }, 

    }); 


});

來源

2014-03-24 14:44:21 johnnyfittizio

，因爲您要更換現有的按鈕。您需要添加事件使用委託新建按鈕，

嘗試

$(document).on("click",".btn-success",function(){ 
e.preventDefault(); 

// alert('click'); 

var data = { 
    user_id: '5', // for debug 
    post_id: '6', // for debug 
    ajax: '1' 

}; 

$.ajax({ 

    url: "<?php echo site_url('post/like'); ?>", 
    type: 'POST', 
    data: data, 
    success: function() { 
    $('#button_like').replaceWith('<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-thumbs-up"></span></button>'); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert("Status: " + textStatus); alert("Error: " + errorThrown); 
     }, 

}); 
});

來源

2014-03-24 13:33:32

我相信這是到你從你的成功的功能按鈕，清除ID？

來源

2014-03-24 13:33:57

您需要動態生成/添加DOM的事件委託。

$(document).on('click','.btn-success',function(){ 
     //click event for button code here 
    });

來源

2014-03-24 13:34:50

您使用的ID爲您附上事件的元素：使用.on()方法。這是否意味着您在頁面上重複了多次相同的ID？如果是這樣的話，jQuery只會將事件添加到它發現的第一個事件中，因爲它只需要每頁一個ID。

嘗試使用類來代替，看看它是如何去。

來源

2014-03-24 13:35:41

類來取代它感謝您的答覆。瞭解了許多按鈕使用相同ID的錯誤。我編輯和使用類。但現在所有的按鈕都變成了綠色。 – johnnyfittizio

由於正在應用的通用選擇器？如果是這樣，那麼只爲這些按鈕創建一個單獨的/不可知的類，並且你應該沒問題，只要它是一個CSS問題。如果可以，請嘗試更改標記（如果有幫助） –

更換element意味着你從DOM失去相同的，所以它的click event也被刪除，爲此，你需要重新綁定click event又一次

更好的是改變你的元素classes和span text

變化在success callback一樣，

success: function() { 
    $('#button_like').addClass('btn-success')// add new class 
        .removeClass('btn-primary') //remove primary class 
        .find('span').text(''); // empty span's text 
},

更新，如果你想使用的class代替id那就試試這個，

var $this=$(this); // make a copy of current button object 
$.ajax({ 
    url: "/", 
    type: 'POST', 
    data: data, 
    success: function() { 
     $this.addClass('btn-success')// add new class to current clicked button 
      .removeClass('btn-primary')// remove old class 
      .html('<span class="glyphicon glyphicon-thumbs-up"></span>');//removing text 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
     alert("Status: " + textStatus); alert("Error: " + errorThrown); 
    } 
});

Live Demo

如果您希望用戶可以單擊一次，然後使用one()

One demo

來源

2014-03-24 13:38:05

您的回覆很有趣。我試圖申請在我創建的Jsbin，但不幸的是不工作。你能把它應用到Jsbin嗎？ – johnnyfittizio

在你的問題更新之前，你正在使用'＃button_like'，現在你想使用'.button_like''類'而不是'id'，無論如何我改變它看到[這個演示]（http：// jsbin。 com/xulaxowa/7）和我更新的答案。 –

你應替換error: function(XMLHttpRequest, ...)error: function(xhr, ...)並替換：

$('#button_like').replaceWith(...);

由：

通過foreach循環我分配到按鈕ID對應的文章ID：

$('#button_like').html('<span class="glyphicon glyphicon-thumbs-up"></span>').addClass('liked');

來源

2014-03-24 13:38:06

阿賈克斯工作僅在第一次

回答

相關問題