Question

I am dynamically adding inputs to a form when a user clicks on an anchor tag that has the jQuery click event attached to it.

$(".add-input").click(function () {

  $("div.form-item").append(get_input());

});

The above function successfully adds new inputs to the form, however I have another jQuery function that adds styling to the currently focused input like so:

$("input, textarea").focus(function () {
  $(this).parent().addClass("cur-focus");
});

This function works great for inputs that were apart of the original form, however all the dynamically added inputs do not have the class added by the above event handler.

Both of these event handlers are inside of the $(document).ready function.

Is there a way for the dynamically added inputs to also be bound to my focus event handler on inputs?

Answer 1

Try this using on or delegate.

Using on jQuery 1.7+

$("form").on("focus", "input, textarea",function () {
     $(this).parent().addClass("cur-focus");
});

Using delegate for older versions

$("form").delegate("input, textarea", "focus", function () {
     $(this).parent().addClass("cur-focus");
});