ajax 이벤트 후 요소 찾기

Question

사용자가 항목과 같은 항목을 좋아할 수있는 사이트에서 작업하고 있습니다. 이 이벤트는 jQuery와 AJAX로 처리됩니다. 항목 배열에는 많은 항목이 있고 각 항목에는 '사랑'버튼이 있습니다. 나는 페이지의 하단에 하나의 양식을 넣고 원격으로 제출함으로써 페이지의 양식 수를 효율적으로 줄이기로 결정했습니다.

사용자가 사랑 버튼을 클릭 할 때마다 항목 ID를 보유하는 데이터 속성이 양식에 입력되고 양식이 제출됩니다. 간단한 물건.

그러나 업데이트 할 항목의 요소 ID를 찾는 방법을 모르기 때문에 데이터 응답이 좀 더 복잡해졌습니다. 나는 단지 this 또는 event.target을 사용할 수 없습니다. 내부가 다른 이벤트이기 때문입니다. 또한 에 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는 지금까지의 내가있어 같이 말한다 마지막 줄. 이 변수가 포함되어 있지 않다는 것이 명백하지만, 내 목표를 달성하기 위해 무엇을 놓을 지 실제로 알지 못합니다. 또한 폼 액션을 통해 추가 매개 변수를 전달할 수 있음을 알고 있습니다 (즉, 레일 컨트롤러로 보내고 뒤로). 어떤 아이디어?

Answer 1

을 전혀 다른 형태. 이런 식으로 뭔가가 작동합니다 :

예 마크 업 (데이터 속성을 확인할 수) :

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

Answer 2

이 같은 요소가있는 경우 : <div id="foo" data-id="foo1234">Foo</div>

당신은 여전히 ​​ foo1234의 ID가 가정이처럼 아약스 포스트 후를 선택할 수 있습니다

: 당신은 필요하지 않습니다

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

Answer 3

을 그냥 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 
    } 
    }) 
});