Question

我希望在克隆并执行onchange后得到select on change的类和值，但它只返回原始select的值。请在下面找到我的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clone</title>
</head>

<body>
<div id="input1" class="clonedInput">
    <select id="fields" class="select">
        <option>Test One</option>
        <option>Test Two</option>
        <option>Test Three</option>
        <option>Test Four</option>
    </select>
</div>
<button>Clone</button>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('button').click(function(){
        var num = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // the numeric ID of the new input field being added
            newElem = $('#input' + num).clone().attr('id', 'input' + newNum).fadeIn('slow');
            newElem.find('select#fields').attr('class','select' + newNum).val('');
            $('#input' + num).after(newElem);
        })
    $('select').change(function(){
        var value = $(this).val(),
        classx = $(this).attr('class');
        console.log(value + ' | ' + classx);
        })
    })
</script>

Answer 1

$-operator首次出现在DOM中，它恰好是原始的。

最简单的解决方案是将一个克隆元素放在DOM结构中的原始文件之前。

您可以使用.before

来完成此操作

另一个解决方案是更改克隆元素id / name并按id / name获取值：

("#clonedElement").attr("id","myID");

Answer 2

解决它的最简单方法是给jQuery的clone()方法true参数，以克隆事件的处理程序。另一种方法是为您的事件处理程序提供一些名称并将其手动附加到克隆节点，或者第三种方式是使用jQuery to delegate events将on() method添加到您的选择标记中：

newElem = $('#input' + num).clone(true);

example 1

......或....

newElem.change(select_change_handler);
$('select').change(select_change_handler);

example 2

......或......

$(document).on('change', 'select', function(e) {

example 3

获得克隆选择的值

2 个答案: