루비 레일 - jQuery JS가 실행 중이지만 아약스 호출을하지 않음

Question

이 jQuery JS가 실행을 위해 호출되고 있지만 왜 jQuery JS가 호출하지 않는지 알아 내려고했다.

컨트롤러의 메소드에 AJAX GET 요청을하기 위해이 버튼을 사용하면 메소드가 부분 렌더링됩니다. 버튼을 클릭하면 콘솔에 어떤 요청도 표시되지 않지만 브라우저에 "테스트"라는 경고가 표시됩니다.
아약스 호출의 다른 튜플을 위해 작동하는 다른 매개 변수와 동일한 JS가 있으므로 방금 매개 변수 중 하나를 복사하고 필요한 모든 매개 변수를 변경하여 즉시 작동 할 것이라고 예상했습니다. 콘솔에 오류가 표시되지 않습니다. 내 경로와 ID 이름이 유용하며 확인되었습니다. 내가 여기서 누락 된 것은 무엇인가?

보기 - 참고 :이 버튼은 다른 아약스를 통해 렌더링되며 그 부분이 작동합니다.

<%= button_tag "Add/Remove", :id => "add_remove_button", :onclick => "javascript:add_remove();" %> #note: this is buried under div tags in a html table 

JS-

function add_remove(){ 
$('#add_remove_button').click(function() { 
     $.ajax({ 
     type: 'GET', 
     url: "/item/add_remove", 
     success:$('#view_item').html(data) 

     /*function(){ }, 
     data:$('#test').serialize(), 
     error: function(){ }, 
     success: function(data){ }, 
     complete: function(){ }*/ 
     }); #No ajax call made 
/*return false;*/ 
}); 
alert('test'); #I get this alert 
} 

Answer 1

당신은 항상 alert()click() 때문에 비동기 것을 볼 수 있습니다 : 당신이 클릭 할 때까지 클릭에 전달 된 function() 내부의 코드가 실행되지 않지만, add_remove()의 나머지 것 전화 받기. 귀하의 버튼에 add_remove()을 첨부

1. :onclick => ... 사용 :

   다음은 실제로는 AJAX 호출이되지 않는 이유를 설명 코드에 무슨 일이 일어나고 있습니다.

2. 단추를 클릭하면 add_remove()이 호출되고 다른 클릭 콜백이 단추에 연결됩니다. 그런 다음 add_remove() 번은 alert()으로 전화합니다. 여기에 AJAX 호출이 발생하지 않으며 새로운 클릭 핸들러를 추가하고 경고를 보냅니다.
3. 두 번째로 단추를 클릭하면 세 번째 클릭 콜백이 단추에 연결됩니다. 그러나 버튼을 처음 클릭 할 때 클릭 핸들러를 연결 했으므로 여기에 AJAX 요청이 표시되어야합니다.
4. 세 번 클릭하면 이번에 두 건의 AJAX 요청이 표시되어 총 3 건의 AJAX 요청이 표시됩니다.

다음은 실제로하고 싶은 일입니다. 제거 :

$(function(){ 
    $('#add_remove_button').click(function() { 
    $.ajax({ 
     type: 'GET', 
     url: "/item/add_remove", 
     success: function(data) { $('#view_item').html(data); }, 
     data: $('#test').serialize(), 
     error: function(){ }, 
     success: function(data){ }, 
     complete: function(){ } 
    }); 
    return false; 
    }); 
}); 

Answer 2

당신은 JQuery와 - 등록 - 콜백을 혼합되어 온 클릭 => ... 버튼에서 : 페이지가 처음로드 될 때

<%= button_tag "Add/Remove", :id => "add_remove_button" %> 

버튼에 클릭 이벤트를 붙이는 것 스타일 및 이전 이벤트 처리기 속성 따라서 add_remove 함수를 호출 할 때 등록을 트리거했습니다.

: onclick stuff 및 function add_remove(){ ... }