이벤트 핸들러가 트리거되지 않음

Question

다음과 같은 jQuery 코드가 있으며 필요한 동작에서 트리거되지 않습니다. 처음 두 $("body").on 함수를 호출하면 세 번째 함수가 호출됩니다. ($("body").on("click", '.upvote', function(event){)가 트리거됩니다. 내가 아무것도 돌려주지 않으면 모든 것을 되돌려 놓는다.

$(document).ready(function() { 
    //function 1 
    $("body").on("change", '.select', function (event) { 
     $('.row.replace').empty(); 
     $('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>"); 
     var filter = $(this).find(":selected").attr("name"); 
     $.ajax({ 
      type: "POST", 
      url: "/filter_home/" + filter + "/" + "TrendingNow" + "/", 
      data: { 
       'name': 'me', 
       'csrfmiddlewaretoken': '{% csrf_token %}' 
      }, 
      //dataType: "json", 
      success: function (data) { 
       $('.row.replace').html("mem"); 
      }, 
      error: function (xhr, errmsg, err) { 
       alert(err); 
      } 
     }); //end ajax 
     return false; 
    }); //end onchange 

    //function 2 
    $("body").on("click", '.sorter', function (event) { 
     $('.row.replace').empty(); 
     $('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>"); 
     var sort = $(this).attr("name"); 
     var filter = $('.select').find(":selected").attr("name"); 
     $.ajax({ 
      type: "POST", 
      url: "/filter_home/" + filter + "/" + sort + "/", 
      data: { 
       'name': 'me', 
       'csrfmiddlewaretoken': '{% csrf_token %}' 
      }, 
      success: function (data) { 
       $('.row.replace').html(data); 
      }, 
      error: function (xhr, errmsg, err) { 
       alert(err); 
      } 
     }); //end ajax 
     return false; 
    }); //end onclick 

    //function 3 
    $("body").on("click", '.upvote', function (event) { 
     var x = $(this).attr("name"); 
     $.ajax({ 
      type: "POST", 
      url: "/upvote/" + x + "/", 
      data: { 
       'name': 'me', 
       'csrfmiddlewaretoken': '{{csrf_token}}' 
      }, 
      dataType: "json", 
      success: function (json) { 
       var y = "vote-count" + x; 
       $('i[class= "' + y + '"]').text(json.vote_count); 

       //flip button 
       $('.flip' + x).find('.card').toggleClass('flipped'); 
      }, 
      error: function (xhr, errmsg, err) { 
       alert("oops, something went wrong! Please try again."); 
      } 
     }); //and ajax 
     return false; 
    }); //end onclick 
}); //end ready 

Answer 1

이벤트 핸들러 (함수 1,2,3)는 모두 false를 반환합니다. 이렇게하면 이벤트가 DOM을 버블 링하지 않게됩니다. 이벤트를 처리하는 첫 번째 기능은 전달을 중지하기 때문에 예상대로 트리거되지 않는 것으로 짐작됩니다. return 문을 제거하여이를 테스트하십시오.

또는 대상에 가까운 위임 된 이벤트 처리기 범위를 지정할 수도 있습니다.