jQuery的數據加載oonce不僅沒有再次合作

Question

我創建了一個jQuery的方法來加載數據時，從下拉菜單中選擇，但問題是，當我點擊並選擇和數據的變化，然後當我再次選擇它不再被

工作

請大家看看下面片斷是我迄今所做

$(document).ready(function() { 
 
\t \t $('select[name="ht_opt"]').change(function() { 
 
\t \t \t var tab = $('select[name="ht_opt"]').val(); 
 
\t \t \t var symbol = $('#symbol').val(); 
 
\t \t \t if ($(this).val()){ 
 
\t \t \t var dropdown = "<select name='ht_opt'><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>"; 
 
\t \t \t \t \t 
 
\t \t \t \t \t $('#ht_title').html(tab + " " + dropdown); 
 
\t \t \t \t \t $('#ht_data').html(symbol); 
 
\t \t \t \t } 
 
\t \t } 
 
\t \t }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 class="inf_h2" id="ht_title">Balance Sheet 
 
\t \t <select name="ht_opt"> 
 
\t \t \t <option>Balance Sheet</option> 
 
\t \t \t <option>Profit and Loss Account</option> 
 
\t \t \t <option>Cash Flow Statement</option> 
 
\t \t </select> 
 
</h2> 
 
<input type="hidden" id="symbol" value="test Symbol" /> 
 

 
<div id="ht_data"> 
 
</div>

Demo fiddle

Answer 1

你可以使用on()函數jquery。因爲你在change函數的每次添加select標記。

只需按照@devnull69註釋下使用第一個選項是這樣<option style='color:#ccc'>--select option--</option>

$(document).ready(function() { 
 
    $(document).on('change','select[name="ht_opt"]',function() { 
 
     var tab = $(this).val(); 
 
     var symbol = $('#symbol').val(); 
 
     if ($(this).val()) { 
 
     var dropdown = "<select name='ht_opt'><option style='color:#ccc'>--select option--</option><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>"; 
 

 
     $('#ht_title').html(tab + " " + dropdown); 
 
     $('#ht_data').html(symbol); 
 
     } 
 
    
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 class="inf_h2" id="ht_title">Balance Sheet 
 
    <select name="ht_opt"> 
 
       <option style="color:#ccc">--select option--</option> 
 
\t \t \t \t \t \t \t <option>Balance Sheet</option> 
 
\t \t \t \t \t \t \t <option>Profit and Loss Account</option> 
 
\t \t \t \t \t \t \t <option>Cash Flow Statement</option> 
 
\t \t \t \t \t \t </select> 
 
</h2> 
 
<input type="hidden" id="symbol" value="test Symbol" /> 
 

 
<div id="ht_data"> 
 
</div>

更新答案：其顯示所選的值而不再現select標籤

$(document).ready(function() { 
 
    $(document).on('change', 'select[name="ht_opt"]', function() { 
 
    var tab = $(this).val(); 
 
    var symbol = $('#symbol').val(); 
 
    $('select[name="ht_opt"] option').removeClass('select') 
 
    $('select[name="ht_opt"] option:selected').addClass('select') 
 
    if (tab) { 
 
     $('#ht_title p').html(tab); 
 
     $('#ht_data').html(symbol); 
 
    } 
 
    }) 
 
})

.select{ 
 
background:#aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 class="inf_h2" id="ht_title"> 
 
    <p>Balance Sheet</p> 
 
    <select name="ht_opt"> 
 
    \t \t \t \t \t \t \t <option class="select">Balance Sheet</option> 
 
    \t \t \t \t \t \t \t <option>Profit and Loss Account</option> 
 
    \t \t \t \t \t \t \t <option>Cash Flow Statement</option> 
 
    \t \t \t \t \t \t </select> 
 
</h2> 
 
<input type="hidden" id="symbol" value="test Symbol" /> 
 

 
<div id="ht_data"> 
 
</div>

使用 委託。但在jQuery 3.0

Answer 2

嘗試，.delegate（）已被棄用。它被代替了。 上（）方法

片段

$(document).ready(function() { 
 
    $('body').delegate('select[name="ht_opt"]','change', function(){ 
 
    var tab = $('select[name="ht_opt"]').val(); 
 
    var symbol = $('#symbol').val(); 
 
    if ($(this).val()){ 
 
     var dropdown = "<select name='ht_opt'><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>"; 
 
     console.log(dropdown); 
 
     $('#ht_title').html(tab + " " + dropdown); 
 
     $('#ht_data').html(symbol); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 class="inf_h2" id="ht_title">Balance Sheet 
 
    <select name="ht_opt"> 
 
    <option>Balance Sheet</option> 
 
    <option>Profit and Loss Account</option> 
 
    <option>Cash Flow Statement</option> 
 
    </select> 
 
</h2> 
 
<input type="hidden" id="symbol" value="test Symbol" /> 
 

 
<div id="ht_data"> 
 
</div>

這裏是的jsfiddle：https://jsfiddle.net/nc425yh1/9/