.append 后某些功能不起作用答案

【问题标题】：Some functions don't work after .append.append 后某些功能不起作用
【发布时间】：2015-02-03 07:43:29
【问题描述】：

我有一个使用autocomplete 和mask 的工作表单。我决定让我的表单更加用户友好，并开始使用tabs 和ajax 来加载内容。要查看所需的表单，我使用.append() 创建一个新选项卡并在其中显示内容，而不是新的浏览器窗口。追加后，新创建的选项卡中应该自动完成的字段不是，而好像我复制完全相同的字段并粘贴在前面（不在 .append 选项卡中），它有强>自动完成。面具也是如此。

我的问题是.append() 究竟是如何工作的？我是否必须在附加后加载一些 js 和 jquery 函数才能使其生效？

【问题讨论】：

标签： javascript jquery ajax autocomplete append

【解决方案1】：

我不确定，因为您没有显示代码，但是当您的元素尚不存在时，您可能在 onReady 内的元素上调用 autocomplete() 函数，因为您肯定正在添加你的tabs 在onReady 之后动态使用append()。

问题是，当您的元素确实存在于您的tab 中时，您必须检查您是否调用了autocomplete()。

我给你一个例子，我 append 和 tab 上的元素，然后当元素存在时，我调用 autocomplete()，并且工作正常。看看吧：

$(function() {
    $( "#tabs" ).tabs();
  
    $('#appendButton').click(function(){
      
      // create auto
	var $auto = $('<div class="ui-widget"><label for="tags">Tags: <\/label><input id="tags"><\/div>');
 
    // append auto
    $('#tabs-1').append($auto);
      console.log('autocomplete');
	// once is appened start autocomplete
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $('#tags').autocomplete({
      source: availableTags
    });
      
   });
  
});

<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
  </ul>
  <div id="tabs-1">
    <p> <input id="appendButton" type="button" onclick"appendAuto();" value="appendAuto" /></p>
  </div>
</div>
 
</body>
</html>

希望这会有所帮助，

【讨论】：

正是我的想法。谢谢