Tw-Bootstrap Tab-Dropdown項目在動態創建時無法訪問

Question

我有一個tab，有兩個dropdowns，其中一個是即時創建的。 渲染後的代碼。

<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反應，但在飛行中創建的那個沒有。我錯過了什麼？

Answer 1

的問題是，既然你是動態添加的元素，你必須點擊事件裝訂，由於添加的元素不存在，當文檔準備好嘗試：

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

Answer 2

的.change() jQuery的特點是你想叫什麼：

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

每當下拉改變這將被調用（如：選項點擊）

的原因，你的解決方案不工作是因爲在加載時，JQuery .on()函數應用於所有當前<li>元素，但.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>