Question

我正在使用Jquery Mobile并且有一种情况需要我以编程方式创建一些表单字段（选择，输入等），如下所示：

$fieldInput = $('<input type="text" name="' + fieldName + '" />');

这完全正常，Jquery按预期为输入设置样式。必须重新创建表单时出现问题。然后我先＃34;清空＃34;使用Jquery的.empty（）方法包含div元素，然后再按照上面的方式再次创建表单元素。

问题是，在第一次之后，所有后续创建表单元素的尝试都会导致Jquery Mobile没有对元素进行样式化。我很聪明地知道这是因为我试图创建一个实际上已经存在的元素，就Jquery而言并且它变得混乱。但是，我不够聪明，不知道该怎么做......我以为我需要以某种方式注销＆＃39;在重新创建之前的元素，但我不知道如何。

我试过调用两个

$fieldInput.trigger('refresh');

和

$fieldInput.trigger('create');

对元素无济于事。我可以进入冗长的重写代码的过程，这样元素只在开始时创建一次，并且只在必要时重置，但由于我不会进入这个原因会让事情变得更复杂。

如何重新创建相同的表单元素（相同的名称，没有ID）并且仍然有Jquery Mobile做它的事情？我如何取消注册＆＃39;一个Jquery Mobile元素？

Answer 1

你已经知道如何以编程方式编写HTML，所以我没有什么可以向你学习，所以直截了当：在添加表单元素之后，你应该告诉JQM创建Widgets并更新容器的布局。

您的问题在某种程度上模糊了您需要的小工具，以下是input，textarea和select的示例。使用empty()就可以了。

function createFormElements() {
  var input = [
    '<label for="basic">Text Input:</label>',
    '<input type="text" name="name" id="basic" value="">'].join("");
  var textarea = [
    '<label for="textarea">Textarea:</label>',
    '<textarea name="textarea" id="textarea">',
    'I\'m a basic textarea.',
    '</textarea>'].join("");
  var select = [
    '<label for="select" class="select">Shipping method:</label>',
    '<select name="select" id="select" data-mini="true">',
    '<option value="standard">Standard: 7 day</option>',
    '<option value="rush">Rush: 3 days</option>',
    '<option value="express">Express: next day</option>',
    '<option value="overnight">Overnight</option>',
    '</select>'].join("");
  $("#myForm").empty();
  $(input).appendTo("#myForm");
  $(textarea).appendTo("#myForm");
  $(select).appendTo("#myForm");
  $("#myForm input").textinput();
  $("#myForm textarea").textinput();
  $("#myForm select").selectmenu();
  $(".ui-content").trigger("updatelayout");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <a class="ui-btn ui-corner-all" href="javascript:void(0);" onclick="createFormElements();">Create Elements</a>
      <form id="myForm">
      </form>
    </div>
  </div>
</body>
</html>

如何销毁和重新创建具有相同名称的Jquery Mobile表单元素

1 个答案: