jQuery Mobile：動態創建的元素沒有點擊事件

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”的克隆）有效？

*更新*

新小提琴：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及其子節點的事件監聽器

Answer 2

在jQuery.clone（）中，您必須根據此ref將事件參數設置為true

 $element.clone(true, true); 

clone（[withDataAndEvents] [，deepWithDataAndEvents]）

withDataAndEvents ：一個布爾值，指示是否應將事件處理程序和數據與元素一起復制。 默認值為false。

deepWithDataAndEvents ：一個布爾值，指示是否應復制克隆元素的所有子項的事件處理程序和數據。 默認情況下，其值與第一個參數的值（默認為false）匹配。

加上@jqueryKing的建議，要有唯一的HTML ID。 所以將代碼更改為： -

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 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() {
    // To avoid duplicate clones, use .first()
    // To enable bindings, pass (true,true) to the clone function
    $clone = $('.select-row').first().clone(true,true); 
    $clone.appendTo('#select-con').show();
});