Question

I have written a simple function:

function inputChanged()
  {
    $('input').change(function(){
      $(this).addClass('changed');
    });
  }

I am adding forms dynamically to a div and would like to bind the function to the added forms, I have tried like this:

// add a new form on click
$('.addForm').live({
    click: function(e) {
        e.preventDefault();
        $("<div>").load("directory/theform.html", function() {
            $("#theForms").prepend($(this).html());
                    // i am calling the function here...
            $("#theForms form:last").validate().inputChange();
        });
    }
});

This is not working for me… How can I bind this function to the dynamically loaded forms?

Answer 1

You can create custom jQuery functions like this:

jQuery.fn.inputChange = function() {         
    $(this).change(function(){
        $(this).addClass("changed");
    });         
    return this; 
} 

And then you can use it like this:

$("#theForms form:last").inputChange();