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

【问题标题】：How to destroy and recreate a Jquery Mobile form element with the same name如何销毁和重新创建具有相同名称的 Jquery Mobile 表单元素
【发布时间】：2017-06-07 15:03:41
【问题描述】：

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

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

这完全可以正常工作，并且 Jquery 可以按预期设置输入样式。当必须重新创建表单时，问题就来了。然后，我首先使用 Jquery 的 .empty() 方法“清空”包含 div 元素，然后像上面一样继续创建表单元素。

问题在于，在第一次之后，所有后续创建表单元素的尝试都会导致 Jquery Mobile 无法设置元素的样式。我很聪明地发现这是因为我正在尝试创建一个元素，就 Jquery 而言，它实际上已经存在并且它变得混乱。但是，我不够聪明，不知道该怎么做......我想我需要在再次创建元素之前以某种方式“取消注册”元素，但我不知道如何。

我都试过了

$fieldInput.trigger('refresh');

和

$fieldInput.trigger('create');

对元素无济于事。我可以去重写我的代码的漫长过程，以便元素只在开始时创建一次，并在必要时简单地重置，但由于我不会进入的原因，这会使事情变得更加复杂。

我怎样才能重新创建相同的表单元素（相同的名称，没有 ID）并且仍然让 Jquery Mobile 做这件事？如何“取消注册”一个 Jquery Mobile 元素？

【问题讨论】：

如果您像 $fieldInput = $('<input type="text" name="' + fieldName + '" />'); 那样“缓存”您的 jquery 选择器，您是否在清空包含的 div 后将变量设置为 null？即$fieldInput = null; 如果不是，则引用可能会阻止元素被完全删除，这可能会弄乱 jQuery Mobile。

标签： javascript jquery jquery-mobile

【解决方案1】：

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

您的问题对于您需要哪些小部件有点模糊，下面是一个带有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>

【讨论】：