javascript - jQuery 手机 : dymamically created elements don't have click events

Question

在我的 jQuery Mobile 网站上，我想让用户可以在单击时添加选择菜单。附加的选择菜单出现，但不起作用。单击选择菜单时不显示任何选项。

这是我的代码:

JSFiddle: http://jsfiddle.net/nCs6U/82/

HTML:

<div id="select-con">
    <div class="select-row">
        <form class="select-form">
            <select class="select-class" name="select-name"
                    data-native-menu="false">
                <option value="0" data-placeholder="Choose">Choose</option>
                <option value="1">Option 1</option>
                <option value="2" selected="selected">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </form>
    </div>

    <!-- raw select menu for adding -->
    <div id="select-row-raw" class="select-row">
        <form class="select-form">
            <select class="select-class" name="select-name"
                    data-native-menu="false">
                <option value="0" data-placeholder="Choose">Choose</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </form>
    </div>
</div>

<button>Add Select</button>

JS:

$('button').on('click', function() {
    $clone = $('#select-row-raw').clone();
    $clone.appendTo('#select-con').show();
});

如何实现添加的选择菜单(“#select-row-raw”的克隆)工作？

* 更新 *

新 fiddle :jsfiddle.net/nCs6U/85

奇怪的是，对于第一个添加的选择菜单，选项的显示仍然不起作用。如何解决这个问题？

Answer 1

在你的 JS 中尝试像这样添加到你的克隆函数中:

$('button').on('click', function() {
    $clone = $('#select-row-raw').clone(true, true);
    $clone.appendTo('#select-con').show();
});

这将克隆#select-row-raw 及其子项的事件监听器