-1
我想讓你的導師Jquery chained. 我卡住了,並在僵局,因爲不知道如何解決這個問題。我嘗試了很多解決方案,但仍然沒有工作。動態地添加新的選擇框後多個jquery鏈接不工作
問題
我要動態地添加(附加)一個新的選擇框的形式。 添加選擇框後,我想添加事件監聽器到新的選擇框 ,因此Jquery chained將會聽到新的選擇框並按原樣工作。
我的解決方案如下圖所示: HTML
<div id="container">
<h3>Multiple Select Box</h3>
<form id="myform">
<select class="product" id="product_0">
<option value="1">Ink</option>
<option value="2">Toner</option>
</select>
<select class="model" id="product_0">
<option value="series-1" class="1">1 series</option>
<option value="series-3" class="1">3 series</option>
<option value="series-5" class="1">5 series</option>
<option value="series-6" class="1">6 series</option>
<option value="series-7" class="1">7 series</option>
<option value="a1" class="2">A1</option>
<option value="a3" class="2">A3</option>
<option value="s3" class="2">S3</option>
<option value="a4" class="2">A4</option>
<option value="s4" class="2">S4</option>
<option value="a5" class="2">A5</option>
<option value="s5" class="2">S5</option>
<option value="a6" class="2">A6</option>
<option value="s6" class="2">S6</option>
<option value="rs6" class="2">RS6</option>
<option value="a8" class="2">A8</option>
</select>
<div id="addHere"></div>
</form>
<a href="#" id="remove">rm</a>
<a href="#" id="add">Add</a>
</div>
因此,我們得到的時候document
準備已經存在的兩個選擇框。 以下是動態追加選擇框並將event listener
添加到每個新選擇框的代碼。
<script type="text/javascript">
$(function(){
console.log('run');
//chained each model that exist on document
$(".model").each(function() {
$(this).chained($(".product", $(this).parent()));
});
//add event listener to new appended select box
// supposed to work,but not
$('#myform #addHere').on('click', '.product', function(event) {
event.preventDefault();
$(".model").each(function() {
$(this).chained($(".product", $(this).parent()));
});
});
//append new select box to #myform
$('#add').on('click',function(event) {
var append = '<select class="product" id="product_1"><option value="">--</option><option value="1">Ink</option><option value="2">Toner</option></select><select class="model" id="product_1"><option value="series-1" class="1">1 series</option><option value="a1" class="2">A1</option></select>';
$('#myform #addHere').append(append);
});
});
</script>
請幫助我,我真的死鎖和沒有任何想法了,解決這一點,我甚至不playing.Really感謝你的幫助。
謝謝。
嗨,thanks.but你的代碼並沒有因爲工作是應該的。 –