Question

我遇到了JQuery Mobile的问题。我尽可能地删除了我的代码。我有一个问题模板，包括下拉菜单，用户可以添加新问题。我克隆模板来创建一个新问题。问题似乎是，在页面的初始加载时，JQuery Mobile会在打开时为JQM设置风格化的下拉菜单中创建一些弹出窗口。在我的例子中，我看到了一个。其中一个孩子有一个名为“问题类型0菜单”的ID。所以这些不是用我的克隆创建的。当我克隆模板时，有没有办法触发他们的创作？

HTML

<div id="questionContainer">
    <select id="questionTemplate">
        <option id="question-value-1-1">Question 1</option>
        <option id="question-value-1-2">Question 2</option>
        <option id="question-value-1-3">Question 3</option>
    </select>
 </div>
 <button>clone</button>

的Javascript

var gOldId = 1;

$("button").click(function()
 {
    var newQuestion = $("#questionTemplate").clone( true, true ).removeAttr("id");

    var newId = $("#questionContainer > *").length + 1;

    // Change ids of clone
    newQuestion.find('[id]').each(function(index)
    {
        var placeholderString = $(this).attr('id');
        $(this).attr('id', placeholderString.replace( gOldId, newId ));


        //alert( 'id' + $(this).attr('id') );
    });

     newQuestion.data("data-native-menu", "false");

     gOldId = newId; // Update id


    newQuestion.appendTo( $("#questionContainer") );
 });

Answer 1

如果您执行元素的“简单”克隆而不是数据和事件，并且如果您手动将selectmenu插件应用于新元素，则代码可以正常工作。

您可以使用：$(<selector>).selectmenu();

代码：

var gOldId = 1;

$("#clone").click(function () {
    var newQuestion = $("#questionTemplate").clone().removeAttr("id");

    var newId = $("#questionContainer > *").length + 1;

    // Change ids of clone
    newQuestion.find('[id]').each(function (index) {
        var placeholderString = $(this).attr('id');
        $(this).attr('id', placeholderString.replace(gOldId, newId));


        //alert( 'id' + $(this).attr('id') );
    });

    newQuestion.data("data-native-menu", "false");

    gOldId = newId; // Update id

    newQuestion.appendTo($("#questionContainer"));

    newQuestion.selectmenu();
});

参考：http://api.jquery.com/clone/和http://api.jquerymobile.com/selectmenu/

演示：http://jsfiddle.net/IrvinDominin/Nc3A7/1/

JQuery Mobile Cloned Drop Down没有克隆弹出窗口

1 个答案: