简体   繁体   English

.append之后某些功能不起作用

[英]Some functions don't work after .append

i have a working form that uses autocomplete and mask . 我有一个使用自动完成功能mask的工作表格。 I decided to make my form more user-friendly and started using tabs and ajax to load the content. 我决定使表单更加用户友好,并开始使用选项卡Ajax加载内容。 To view the desired form i'm using .append() to create a new tab and display the content in it, instead of a new browser window. 要查看所需的表单,我正在使用.append()创建一个新标签并在其中显示内容,而不是一个新的浏览器窗口。 After append, the fields inside the newly-created tab, who are supposed to be autocompleted, are not, while as if i copy the exact same field and paste infront (not in the .append tab), it has the autocomplete. 追加后,新创建的选项卡中的应该自动完成的字段将不再存在,而好像我复制了完全相同的字段并粘贴在最前面(不在.append选项卡中),它具有自动完成功能。 Same goes with the mask. 面具也一样。

My question is how exactly does .append() work? 我的问题是.append()到底如何工作? Do i have to load some js and jquery functions after appending in order for them to take effect? 为了使其生效,我是否必须追加加载一些js和jquery函数?

I'm not sure since you didn't show your code, however it's probably that you call autocomplete() function on your element inside onReady when your element is not already present, because surely you are adding the content of your tabs dynamically using append() after onReady . 我不确定,因为您没有显示代码,但是,当元素不存在时,可能是在onReady内的元素上调用了autocomplete()函数,因为您肯定会使用append()动态append() tabs的内容append()onReady之后。

The thing is that you must check that you call autocomplete() when your element is really present in your tab . 问题是,当tab确实存在元素时,必须检查是否调用了autocomplete()

I give you an example where I append and element on the tab and then when the element is present I call autocomplete() , and works correctly. 我给你一个例子,我在tabappend和元素,然后当元素存在时,我调用autocomplete() ,并且可以正常工作。 Check it out: 看看这个:

 $(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> 

Hope this helps, 希望这可以帮助,

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM