Tw-Bootstrapタブ - ドロップダウンアイテムが即時に作成されたときにアクセスできない

Question

tabには2つのdropdownsがあり、そのうちの1つがオンザフライで作成されます。 レンダリング後のコード。

<ul id="tabOp" class="nav nav-tabs"> 
<li class="" role="presentation"><a data-toggle="tab" href="#global" aria-expanded="false">Global</a></li> 
<li id="liDropdownCentro" role="presentation" class="dropdown active"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#centro" aria-expanded="false">Centro 
     <span class="caret"></span> 
    </a> 
    <ul id="dropdownCentroList" class="dropdown-menu"><li class="active"><a href="#ddc1" data-toggle="tab" aria-expanded="true">Option 1</a></li><li><a href="#ddc2" data-toggle="tab" aria-expanded="false">Option 2</a></li></ul> 
</li> 
<li id="liDropdownSupervisor" class="dropdown" role="presentation"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#supervisor" aria-expanded="false">Supervisor 
     <span class="caret"></span> 
    </a> 
    <ul id="dropdownSupervisorList" class="dropdown-menu"> 
     <li class=""><a href="#1" data-toggle="tab" aria-expanded="false">Submenu 1-1</a></li> 
     <li class=""><a href="#2" data-toggle="tab" aria-expanded="false">Submenu 1-2</a></li>         
    </ul> 
</li> 

今、私は、ユーザーがそれらのdropdownsからオプションを選択したときに反応するようにしたいです。

$('.dropdown-menu > li').on('click', function() { 
    console.log($(this));   
}); 

ハードコードされたdropdownは反応しますが、オンザフライで作成されたものは反応しません。私は何が欠けていますか？

.change()のjQueryの機能を呼び出すしたいものです

Answer 1

問題は、あなたが動的に要素を追加しているので、あなたは文書の準備ができて試してみるときに追加の要素が存在しないので、文書へのクリックイベントをバインドしなければならないことである。

$(document).on('click','.dropdown-menu > li', function() { 
    console.log($(this));   
}); 

Answer 2

：

$('.dropdown-menu').change(()=>{ 
    console.log($(this)); 
}) 

ドロップダウンが変更されるたびに呼び出されます（例：オプションがクリックされた）

ソリューションがする理由ロード時には、現在のすべての<li>要素にJQuery .on()関数が適用されますが、.change()が親に直接適用されるためです。

Answer 3

あなたが委任することができますイベントをtabOpに送信すると、イベントハンドラをアタッチするときに子要素が存在しないためです。

次のコード例では：

var strHTML = ' <li id="liDropdownSupervisor" class="dropdown" role="presentation">\ 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#supervisor" aria-expanded="false">Supervisor\ 
 
     <span class="caret"></span>\ 
 
     </a>\ 
 
     <ul id="dropdownSupervisorList" class="dropdown-menu">\ 
 
     <li class=""><a href="#1" data-toggle="tab" aria-expanded="false">Submenu 1-1</a></li>\ 
 
<li class=""><a href="#2" data-toggle="tab" aria-expanded="false">Submenu 1-2</a></li>\ 
 
</ul>\ 
 
</li>\ 
 
'; 
 

 
$('#tabOp').on('click', '.dropdown-menu > li', function() { 
 
    console.log(this.outerHTML); 
 
}); 
 

 

 
// 
 
// add item on the fly 
 
// 
 
$('#tabOp').append(strHTML);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<ul id="tabOp" class="nav nav-tabs"> 
 
    <li class="" role="presentation"><a data-toggle="tab" href="#global" aria-expanded="false">Global</a></li> 
 
    <li id="liDropdownCentro" role="presentation" class="dropdown active"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#centro" aria-expanded="false">Centro 
 
      <span class="caret"></span> 
 
     </a> 
 
     <ul id="dropdownCentroList" class="dropdown-menu"> 
 
      <li class="active"><a href="#ddc1" data-toggle="tab" aria-expanded="true">Option 1</a></li> 
 
      <li><a href="#ddc2" data-toggle="tab" aria-expanded="false">Option 2</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>