부트 스트랩/jQuery 이벤트 바인딩 문제

Question

현재 프로젝트에서 Twitter 부트 스트랩을 구현 중이며 $ (문서)에 시간 바인딩 이벤트 처리기가 있어야합니다. 그들은 기본적으로 무시 당하고 있습니다. 제가 $ ("body")에 묶는다면 그들은 어느 정도 잘 작동합니다.

이벤트가 "몸"을 통해 바인딩

$(function() { 
    $("body").on("click", "a[data-toggle=modal]", on_click_data_toggle); 
function on_click_data_toggle(e){ 
    e.preventDefault(); 
    var url = $(e.currentTarget).attr('href'); 
    if (url.indexOf('#') == 0) { 
     $(url).modal('open'); 
    } else { 
     $.ajax({ 
      url: url, 
      success: function(data){ 
       if(data.length > 0) 
       { 
        $('<div class="modal hide fade">' + data + '</div>').modal(); 
       } 
      }, 
      error: function(){ 
      } 
     }); 
    } 
} 

는 콘솔이 다음과 같은 표시 유지하는 것을 제외하고 작동합니다

<div class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
    <li><a href="/edit_status/1174" data-toggle="modal"><i class="icon-pencil"></i> Change Status</a></li> 

다음

는 JS입니다 : 여기

는 HTML의 오류 : 잡히지 않은 오류 : 구문 오류, 인식 할 수없는 표현식 :/edit_status/1348 코드 exe 괜찮 았어.하지만 나에게도 $ (document) .on 접근법이 작동하지 않을 것 같은 다른 무언가가 있다고 생각하게 만든다.

저는 자바 스크립트 오류는 일반적으로 선택기 문제가 있다는 것을 의미하지만 코드는 실행되므로 철저히 혼란 스럽습니다.

도움이나 조언을 주시면 감사하겠습니다.

Answer 1

하지 당신이 표시되지 않는 것보다 jQuery 코드가 확실하지만,하지 않을 경우, 당신은 클릭 위임 및 준비 위임 모두에서 닫는 대괄호와 괄호를 놓치고있어. 또한 함수를 익명 함수로 옮겼습니다.

$(function() { 
    $("body").on("click", "a[data-toggle=modal]", function(e){ 

     e.preventDefault(); 

     var url = $(this).attr('href'); 

     if (url.indexOf('#') == 0) { 
      $(url).modal('open'); 
     } else { 
      $.ajax({ 
       url: url, 
       success: function(data){ 
        if(data.length > 0) 
        { 
         $('<div class="modal hide fade">' + data + '</div>').modal(); 
        } 
       }, 
       error: function(){ 
       } 
      }); 
     } 
    }); 
}); 

간단히 말해서이 기능이 작동합니다. 위임자 내에서 이와 같은 익명 함수를 사용하면 this (이 경우 클릭 이벤트를 트리거 한 앵커)이 가리키는 것이 무엇인지 명확하게 알 수 있습니다. http://twitter.github.io/bootstrap/javascript.html#modals

Answer 2

체크 아웃 quirks mode을 최대 어떻게 이벤트 거품에 대한 설명 :

FWIW, 모달 플러그인은 여기에서하려고하는 것과 같은 결과를 얻을 가능성이 것 remote 옵션이 있습니다 않습니다 문서. 모든 것이 동일하면 문서 클릭 핸들러가 작동해야합니다 (이 fiddle 참조). 자식 노드 (이 경우에는 본문)의 클릭 핸들러가 이벤트 전파를 중지하는 경우가 아닌 경우입니다. 내 추측은 당신이 사용하고있는 플러그인 중 하나가 이것을하고 있다는 것입니다. 문서에서 클릭 핸들러가있는 페이지를 만들거나 (내 피들을 사용) 플러그인을 하나씩 추가하여 문제의 원인을 확인하십시오.

$(document).click(function(){ 
    alert('You clicked me!'); 
}); 

Answer 3

이 오류는 모델 팝업을 열 부트 스트랩의 전환 모델 attribitue을 사용하는 것입니다, 대신 사용 MVC 액션 링크 또는 htnl 페이지에서 모든 클래스없이이 코드 .. 당신이 어떤 제안이있는 경우 메일을 보내는 것보다 : vishalroxx7@gmail.com

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title"></h4> 

      </div> 
      <div class="modal-body"><div class="te">Please wait...</div></div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       @*<button type="button" class="btn btn-primary">Save changes</button>*@ 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 








    $(document).ready(function() { 
     // $('.dialog-window').attr("data-target", "#myModal"); // this is used when you oen a single link on a page 
     // $('.dialog-window').attr("data-toggle", "modal"); /// this is used to attache dyanaic call to anchor tag or action link 


     $("body").on("click", "a.dialog-window", null, function (e) 
     {    
      e.preventDefault(); 


      var $link = $(this); // Reference to <a/> link 
      var title = $link.text();// this is title to fetch in htnl  
      $('#myModal .modal-title').html(title); 

      var url = $(this).attr('href'); 
      if (url.indexOf('#') == 0) { 
       $('#myModal').modal('show'); 
      } 
      else 
      { 

       $.get(url, function (data) { 
        $('#myModal .te').html(data); 
        $('#myModal').modal(); 
       }).success(function() { $('input:text:visible:first').focus(); }); 

      } 

     }); 
    }); 

</script>