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/