Execute JavaScript function on a dynamic element (AJAX).

Question

Hello i have this following function:

... var model = $("#carModel");
.... model.change(validModel);

function validModel(){
     if(model.val() == 0){
            model.addClass("errorJS");
            return false;
            }else{
            model.removeClass("errorJS");
            return true;
            }  
    }

I am getting carmodel id from a select box generated after an AJAX call. I can get its value in the Firebug console, but the function doest not execute. Even tough i use model.livequery(validModel);

// The errorJS class puts a red border arround a element, if the function returns false

Answer 1

Among other problems, model means nothing inside the function context. Also, it makes no sense to call change(validModel) with this function, as it only returns a true/false value. You'll need to do something like:

model.change(function() {
    var truefalse = validModel(this);
    //do something with truefalse
});

and change the definition of validModel to

var validModel = function(elem){
   if($(elem).val() == undefined){
       $(elem).addClass("errorJS");
       return false;
   } else {
       $(elem).removeClass("errorJS");
        return true;
   } 
}

Answer 2

I got it, the problem was with the ready event, i defined the function out of it and voila.