3

Bootstrap 3 を使用して、この投稿で提案されている方法を使用していくつかのタブを動的に作成しています: Add / Remove Tabs Dynamically in Bootstrap - Make created tab active。

イベント発火メカニズムとは別に、うまく機能しています。たとえば、静的に事前定義されたタブをクリックすると、shown.bs.tabイベントが発生しますが、動的に作成されたタブには当てはまりません。

上記の投稿https://jsfiddle.net/HotPheel/v6be62c4/4/で提案されたものから適応されたこのフィドルで試すことができ ます

HTML

<div class="container">
<ul class="nav nav-tabs">
    <li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li>
    <li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li>
    <li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
    <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
</div>

JS

$(".nav-tabs").on("click", "a", function(e){
  e.preventDefault();
  $(this).tab('show');
})
.on("click", "span", function () {
    var anchor = $(this).siblings('a');
    $(anchor.attr('href')).remove();
    $(this).parent().remove();
    $(".nav-tabs li").children('a').first().click();
});

$('.add-contact').click(function(e) {
    e.preventDefault();
    var id = $(".nav-tabs").children().length; //think about it ;)
    $(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');
    $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');});

$('a[data-toggle="tab"]')
  .on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href");
    alert('clicked on tab' + target);
})

CSS

.container {margin-top: 10px;}
.nav-tabs > li {position:relative;}
.nav-tabs > li > a {display:inline-block;}
.nav-tabs > li > span {
  display:none;
  cursor:pointer;
  position:absolute;
  right: 6px;
  top: 8px;
  color: red;}
.nav-tabs > li:hover > span {display: inline-block;}

イベントを保持するブートストラップ タブを動的に作成する方法に関するアイデアはありますか?

助けてくれてありがとう。

4

1 に答える 1

2

私が特定できる問題が 2 つあります。対処すれば、実用的なソリューションが実装されます。

まず、現在のコードは、新しいタブ/ div を追加するロジックでdata-toggle="tab"新しいコードに追加されません。<li>だから私はこれを次のように更新しました：

$(this).closest('li').before('<li><a href="#contact_'+id+'" data-toggle="tab">New Tab</a><span>x</span></li>');

次に、このスレッドなどの他のスレッドによると、正しいイベント処理ロジックは次のようにフックすることです。

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
  var target = $(e.target).attr("href");
  alert('clicked on tab' + target);
})

フィドルの更新: https://jsfiddle.net/RobinMackenzie/ym9enL5p/4/

それが役立つことを願っています。

于 2016-08-06T08:57:48.197 に答える