jquery live data is not responsding to the DOM

I am using this jquery plugin for called tokeninput it's for autosuggestion 开发者_Python百科when typing:

the code here generates the autosuggestion for the input box:

$("#input-auto").tokenInput("topicGet.php", {
                theme: "facebook"
            });

but when I try to append the input which uses the #input-auto it does not do the autosuggestion but it works when it's loaded on the page:

the code is here:

$('.topicEdit').live('click', function() {
           $('#Qtopics').html('<input type="text" id="input-auto" />');

I'm trying to solve the problem, but I can't find anything, I also tried to put the live click on the .topicEdit, but it's still not working. :)) thanks

Looks like you're probably initializing the autosuggestion BEFORE you add the input into the DOM. You have to remember that jQuery is stupid, and only does things in the order that you tell it. When you initially 'generate' the autosuggestion, if it can't find it in the DOM at that moment, it won't do anything! So, to solve your problem, you'll want to do the generation of the autosuggest after you insert it into the DOM:

$('.topicEdit').live('click', function() {
  $('#Qtopics').html('<input type="text" id="input-auto" />');
  $("#input-auto").tokenInput("topicGet.php", {
    theme: "facebook"
  });
});

yay?

Calling tokenInput on page load when input-auto doesn't yet exist is your problem.

$('.topicEdit').live('click', function() {
           $('#Qtopics').html('<input type="text" id="input-auto" />');

           $("#input-auto").tokenInput("topicGet.php", {
                theme: "facebook"
           });
});

I'm not exactly sure what the problem is, but try using livequery plugin. You don't need to specify an event to it, just a function which will run for all current and future elements that match the selector.

Example:

$(".something").livequery(function () {
    // do something with the element
}