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 ：一个布尔值，指示是否应将事件处理程序和数据与元素一起复制。默认值为   假的。

deepWithDataAndEvents ：一个布尔值，指示是否应复制克隆元素的所有子项的事件处理程序和数据。通过   default其值与第一个参数的值匹配（默认值   为假。）

加上@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();
});

jQuery Mobile：动态创建的元素没有点击事件

2 个答案: