Question

我在使用jQuery Clone和来自下拉列表的.change时遇到了一些问题。

我需要使用下拉列表中的数字更新div，一切都很好，当我克隆下拉列表时问题就出现了，之后克隆的项目不会使用所选值更新数字第一个将更新所有。

<button type="button" id="addmore" >Add More</button>
<br>

<div class="dynamic-content1">
    <select name="list" class="list" id="name">
        <option value="25">Ticket 1</option>
        <option value="50">Ticket 2</option>
        <option value="70">Ticket 3</option>
    </select>
    <div class="tag">25</div>
</div>

和jQuery：

var count = 0;
$('#addmore').click(function(){

    var $clone = $('.dynamic-content1:eq(0)').clone();
    $clone.find('[id]').each(function(){this.id+=''});
    $clone.attr('id', "added"+(++count));
    $('.dynamic-content1:eq(0)').after($clone);

});


$('#name').change(function(event) {
    $('.tag').html($('#name').val());
});

工作小提琴：

http://jsfiddle.net/QuadDamage/ej0t9c0e/

我相信我应该执行每个陈述，但说实话，我没有看到如何做到这一点。

提前致谢

Answer 1

请替换下面的代码。

$('#name').change(function(event) {
   $('.tag').html($('#name').val());
});

请添加此代码

$(document).on('change', '.list', function() {
    $(this).parent().next().html($(this).val());
});

Answer 2

jQuery在制作元素的克隆时不会保持选择。你可以试试这个

  .clone(true)

这将复制下拉列表中的所有evens和数据。我希望这可以帮助您使用事件。

jQuery Clone和.change下拉列表

2 个答案: