Some functions don't work after .append
Question
i have a working form that uses 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() to create a new tab and display the content in it, instead of a new browser window. 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. Same goes with the mask.
My question is how exactly does .append() work? Do i have to load some js and jquery functions after appending in order for them to take effect?
1 answers
solution1
2 ACCPTED 2015-02-02 23:20:11
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 .
The thing is that you must check that you call autocomplete() when your element is really present in your tab .
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. 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,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.