一些功能在 .append 之后不起作用

Question

我有一个工作表单，它使用 autocomplete and mask. I decided to make my form more user-friendly and started using tabs and ajax to load the content. To view the desired form i'm using .append() 创建新选项卡并显示其中的内容，而不是使用新浏览器 window。附加后，新创建的选项卡中的字段应该自动完成，但就好像我复制了完全相同的字段并粘贴在前面（不在 .append 选项卡中），它有自动完成。面具也一样。

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

Answer 1

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

问题是当您的元素确实存在于您的 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>

希望这对您有所帮助，

一些功能在 .append 之后不起作用

Some functions don't work after .append

javascript

jquery

ajax

autocomplete

append