Question

I’m really stuck with a jQuery issue and I hope someone can help me out…

So I have a list of options on the left, and when you click on one, a form is generated via Ajax on the right. There’s this element in the form:

<input type="text" class="value" value="something">

And what I want to do is to call

$(".value").tagsInput();

which is a jQuery plugin that works pretty much like Stack Overflow’s ‘Tags’ input field when you ask a question.

So I tried this:

$(document).ready(function() {
  $(".value").on("load", function () {
    console.log("Tags Input");
    $(".value").tagsInput();
  });
});

and nothing is printed out. I’ve also tried this:

$(document).on("change", ".value", function () {
  console.log("Tags Input");
  $(".value").tagsInput();
});

and it doesn’t work either. I’m wondering where I did wrong. Can anyone help me out?

Answer 1

As pointed out by Shabnam, the “change” event is not what you want, as it is fired only once the field is blurred.

Anyways, from the plugin documentation, it looks like you don’t have to call that function every time a key is pressed, but it attaches its own event handlers autonomously.

So, probably you should be fine with just:

$(document).ready(function() {
    $(".value").tagsInput();
});

Your .on handler will never work, as the load event is fired only by document when the page is ready.

If you want to debug things a bit, have a look at the supported callbacks, such as onChange.

SIDE NOTE

I don’t like how that plugin is written, as it clogs the “global” jQuery.fn namespace with lots of functions, while jQuery documentation recommends not doing so (see: Namespacing).

UPDATE

See here: http://jsfiddle.net/aFPHL/ an example of this working (the .load() was monkeypatched to avoid having to call an actual URL, but its behavior is pretty much the same as the real one).