2

我在使用 JQuery Mobile 时遇到问题。我已经尽我所能在这里精简了我的代码。我有一个包含下拉列表的 questionTemplate，用户可以添加新问题。我克隆模板以创建一个新问题。问题似乎是，在页面的初始加载时，JQuery Mobile 在打开时为下拉菜单创建了一些弹出窗口，这些弹出窗口是为 JQM 设计的。在我的示例中，我看到一个 . 其中一个孩子有一个名为“question-type-0-menu”的 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") );
 });
4

1 回答 1

0

如果您执行元素的“简单”克隆而不是数据和事件，并且如果您手动将 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/

于 2013-09-17T20:50:02.050 回答