Twitter 부트 스트랩 탭 및 자바 스크립트 이벤트

Twitter 부트 스트랩 탭 및 자바 스크립트 이벤트

---

프로젝트에 트위터 부트 스트랩을 사용하고 있습니다. 특히 탭 기능 ( http://twitter.github.com/bootstrap/javascript.html#tabs )

이제이 탭 목록이 있고 탭을 누르면 각 개별 탭의 내용으로 전환됩니다. 그러나이 콘텐츠는 페이지에 미리로드되어 있습니다 (모든 탭의 콘텐츠에 대한 html 코드가 이미 있으며 탭을 눌러 가시성을 변경할 수 있습니다).

그러나 특정 탭을 눌렀을 때만 콘텐츠를 동적으로로드하고 싶으므로 전체 페이지가로드 될 때 데이터 대신 최신 데이터를 가져옵니다.

이를 위해 jQuery를 사용할 계획입니다. 그러나 탭을 누르면 특정 jquery 함수가 호출되도록 어떻게 만들 수 있습니까?

탭을 클릭했을 때 경고를 표시하려고했지만 (작동하는 경우 jQuery 함수도 작동합니다) 작동하지 않습니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});
</script>

그리고 내 HTML :

<ul class="tabs" data-tabs="tabs">
  <li class="active"><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</li>
</ul>

<div id="my-tab-content" class="tab-content">
  <div class="tab-pane" id="tab1">
      <h1>Tab1</h1>
      <p>orange orange orange orange orange</p>
  </div>
  <div class="tab-pane" id="tab2">
     <h1>Tab2</h1>
     <p>blue blue blue blue blue</p>
  </div>
</div>

이 작업을 수행하는 방법에 대한 아이디어가 있습니까?

트위터 부트 스트랩 탭 ( http://twitter.github.com/bootstrap/javascript.html#tabs ) 및 사용하는 js 파일 : http://twitter.github.com/bootstrap/1.4. 0 / bootstrap-tabs.js

---

바인딩은 DOM이 준비되기 전에 실행되는 것 같습니다. 또한 선택기가 손상된 것으로 보이며 선택한 요소에만 변경 사항을 바인딩 할 수 있습니다. 몇 가지 논리를 클릭하고 구현하여 해결해야합니다. 시험

$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});

최신 정보

문서를 참조한 후 코드에 DOM 준비 부분 만 누락 된 것 같고 나머지는 실제로 버그가 아니 었습니다. 즉, 문서에 따르면 다음이 작동해야합니다.

$(function() {
    $('.tabs').bind('change', function (e) {
        // e.target is the new active tab according to docs
        // so save the reference in case it's needed later on
        window.activeTab = e.target;
        // display the alert
        alert("hello");
        // Load data etc
    });
});

What caused confusion is that the plugin overrides default selector, making #.tabs valid and also adding a change event to the tab element. Go figure why they decided this syntax was a great idea.

Anyways you can try the second sample and comment wether the alert is fired before or after the tab change.

EDIT: fixed jquery exception caused by #.tabs selector

---

With Twitter Bootstrap version 2 the documented way to subscribe to tab change events is

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

The latest documentation on Twitter Bootstrap tab events can be found at http://getbootstrap.com/javascript/#tabs

---

If you are using 2.3.2 and it's not working, try using:

$(document).on("shown", 'a[data-toggle="tab"]', function (e) {
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
});

2.3.2 tabs usage: http://getbootstrap.com/2.3.2/javascript.html#tabs

If you are playing with version 3 (currently RC2) then documentation shows

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
 })

RC2 Tabs Usage: http://getbootstrap.com/javascript/#tabs-usage

---

You can use the following snippet of code in bootstrap 3

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   var activatedTab = e.target; // activated tab
})

---

How about using click? Like this:

$('#.tabs').click(function (e) {
  e.target(window.alert("hello"))
})

---

You have an error in your syntax relating to the selector:

$('#.tabs') // should be ...
$('.tabs');

The unordered list has the class called 'tabs' in your HTML, whereas you were originally trying to select an element with the id '.tabs'.

And you'll have to take manticore's suggestion into account too. You can only use 'change' on form elements.

$(document).ready(function() {
    $('.tabs').click(function(e) {
        e.preventDefault();
        alert('tab clicked!');
    });
});

---

Documentation says: use event show.

참고URL : https://stackoverflow.com/questions/8136904/twitter-bootstrap-tabs-and-javascript-events