2013-02-15 2 views
4

부트 스트랩 documentation 쉽게 다음 코드를 사용하여 데이터 API를 사용하지 않도록 설정할 수 있습니다 말한다 :부트 스트랩 데이터 속성 API를 비활성화 하시겠습니까?

$('body').off('.data-api');

내가 그 다른 자바 스크립트가 동일한 데이터 속성을 사용하는 경우, 정말 멋진 생각했다. 특수 영역에서 bootstrap-API 만 비활성화하면됩니다. 각각-태그의 API를 사용하지 예를 들어

:

<html> 
    <head> 
    <title>Bootstrap - Test - Disable The API</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     //This is working: $(document).off('.data-api'); 

     //This is not working: 
     $('a').off('.data-api'); 
     }); 
    </script> 
    </head> 
    <body> 

    <!-- Button to open the modal --> 
    <a id="clickBtn" href="#myModal" data-toggle="modal">Launch demo modal</a> 

    <!-- Modal --> 
    <div id="myModal" class="modal hide fade"> 
     This is just a little test 
    </div> 

    </body> 
</html> 

하지만이 작동하지 않았다.

모달에 대해 여전히 clickEvent입니다. 아무도 내가 잘못한 것을 말할 수 있습니까?

$('#clickBtn').off('.data-api');에도 작동하지 않습니다.

답변

4

좋아요, 제가 직접 문제를 해결했다고 생각합니다. 핸들러가 문서 루트에 부착되어 있기 때문에 당신이

$('body').off('.data-api'); 또는 $('#clickBtn').off('.data-api');

와 API를 사용하지 않도록 설정할 수 물론

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { 
     ... 
    }) 

: 부트 스트랩은 문서 루트에 이벤트 핸들러를 첨부 신체 나 요소 자체가 아닙니다.

$(document).off('.data-api','a'); 

그것은 부트 스트랩을 보인다 : 당신이 (내 예제 ​​A-태그에) 특별한 요소의 API를 사용하지 않으려면

, 당신은 오프 방법의 선택 - 매개 변수를 정의해야 -documentation는

1

다음 코드는 작동하지 않습니다 ... 조금 혼란 : 당신은이 같은 개별 플러그인을 사용하지 않도록 설정할 수 있습니다

$(document).off('.data-api','a'); 

.

e.g. $(document).off('.modal.data-api'); 

HTML 요소가 아닙니다.

그러나 부트 스트랩 데이터 속성과 다른 스크립트의 데이터 속성이 jQuery로 인해 발생하는 문제를 무시할 수 있습니다.

$('.selected-areas a').filter('[href]').click(function(){ 
    window.location.href = $(this).attr('href'); 
}); 
0

당신이 특정 부분에서 부트 스트랩의 데이터 API를 사용하려면 : 당신의 연결 예를 사용하여 다음 링크는 데이터가 부트 스트랩 플러그인이 아닌 스크립트에서 속성이있는 요소 unclickable 될 작업을 수행 DOM 트리에서 이벤트 처리기를 다른 공통 조상 (들)으로 옮길 수 있습니다. 이 코드는 나에게 꽤 잘 작동하지만, 유의하시기 바랍니다. - as stated here - 이 접근법은 문서화되지 않은 jQuery 기능을 사용하여 document 객체에 할당 된 이벤트 핸들러를 가져옵니다.

function moveBootstrapEventHandlersTo(target) { 
    /* undocumented jQuery feature below */ 
    var eventHandlers = $._data(document, "events"); 

    $.each(eventHandlers, function() { 
     $.each(this, function() { 
      $(target).on(
       this.origType + "." + this.namespace, 
       this.selector, 
       this.data, 
       this.handler 
      ); 
    }); 
}); 

데이터 API를 기본적으로 비활성화하고 일부 클래스 이름으로 활성화 할 수 있습니다. 이러한 요소를 중첩하지 않도록하십시오. 모든 이벤트가 버블 링되므로 중첩 될 때 동일한 이벤트 핸들러가 여러 번 호출됩니다.

<body> 
    <div class="with-bs-data-api"> 
     // bootstrap data api works here 
    </div> 
    <div class="some-other-class"> 
     // but doesn't work here 
    </div> 
    <footer> 
     <div class="with-bs-data-api"> 
      // and here it works again 
     </div> 
    </footer> 
    <script type="text/javascript"> 
     moveBootstrapEventHandlersTo(".with-bs-data-api"); 
     $(document).off('.data-api'); 
    </script> 
</body> 
관련 문제