2013-01-15 34 views
0

我正在開發一個允許用戶喜歡某個項目的網站(如項目)。該事件由jQuery和AJAX處理。 item數組包含相當多的項目,每個項目都有一個「愛」按鈕。我決定通過在頁面的底部放置一個表單並且僅僅通過遠程提交來有效地減少頁面上的表單數量。查找ajax事件後的元素

所以每次用戶點擊愛情按鈕時,都會將包含該物品ID的數據屬性放入表單中,並提交表單。簡單的東西。

但我發現數據響應有點複雜,因爲我不知道如何找到要更新的項目的元素ID。我不能只使用thisevent.target,因爲它內部有不同的事件。我也嘗試將event參數放入submit event,但它不起作用。

$(".love_item").click (event) -> 
    $(".love_item_item_id").val $(this).data 'id' 
    $(".love_item_form").submit() 
    $(this).hide(200) 

    $("form.love_item_form").submit (evt) -> 
    evt.preventDefault() 
    $form = $ @ 
    $form.find(':submit').prop 'disabled', true 
    $.post($form.attr('action'), $form.serializeArray(), type: 'json').done (data) -> 
     $(event.target).parent().find(".item_info_box").html data 

最後一行,在那裏說event.target是據我已經得到了。很明顯,這個變量沒有被執行,但我真的不知道要在那裏實現我的目標。另外,我知道我可以通過表單動作傳遞額外的參數(換句話說,將它們發送給rails控制器並返回),但我寧願不要。有任何想法嗎?

回答

2

你並不需要一個abitrary形式。像這樣的東西會工作:

示例標記(注意數據屬性):

<a href="#" data-id="2" class="likeable">Item to like</a> 

的jQuery:

$('a.likeable').on('click', function() { 
    var $item = $(this); 
    var id = $item.data('id'); 

    $.post('url/like/' + id, function() { 
     // success 
     // do something with $item here. 
    }); 
}); 
1

如果你有一個這樣的元素:<div id="foo" data-id="foo1234">Foo</div>

您可以將您的AJAX後這樣以後選擇它,假設你仍然有foo1234的ID:

$('[data-id="' + id + '"]').doSomething(); 
1

只是使用jQuery的Ajax功能

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

    $.ajax({ 
    type: 'POST', 
    url: *insert url here*, 
    data: 'id=' + e.currentTarget.data-id, 
    success: function(response) { 

     var element = e.currentTarget; 

     // do whatever 
    } 
    }) 
});