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

jQuery Mobile: dymamically created elements don't have click events

本文关键字：事件 元素 Mobile 动态 创建 jQuery      更新时间：2023-09-26

在我的jQuery移动网站上，我想给用户添加点击选择菜单的可能性。其他选择菜单出现了，但是不起作用。单击选择菜单时不显示任何选项。

下面是我的代码:

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")的工作?

* UPDATE *

新提琴:jsfiddle.net/nCs6U/85

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

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

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

这将克隆#select-row-raw的事件监听器和它的子元素

在jQuery.clone()中，您必须按照此ref

将事件参数设置为true
$element.clone(true, true);

clone([withDataAndEvents] [， deepWithDataAndEvents])

withdataanddevents :一个布尔值，指示是否应该将事件处理程序和数据与元素一起复制。默认值为假的。

deepwithdataanddevents :一个布尔值，指示是否应该复制克隆元素的所有子元素的事件处理程序和数据。通过默认它的值与第一个参数的值(默认为为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();
});
相关文章：