Unobtrusive attachment of functions to events in jQuery

 

Lets say I have text input field that is part of search form, and when user clicks on find, it gets results in another part of screen. What I want is, when user changes value in some of the inputs of search form, that search results be invalidated/removed as they are not actual anymore.

As search form can have many fields, I decided to make one function for resetting search, and to make unobtrusive attachment for “change” event. I did that by adding “change” attribute to input field:

<input name="Search.SomeValue" class="valid" id="Search_SomeValue" change="resetSearch" type="text" />

This attribute is consumed by this function:

$("[change]").each(function(){
        var functionName = $(this).attr("change");
        var change = window[functionName];
        $(this).change(change);
    });

What this code does is:

– For each element with change=”something”, read something (in this case “resetSearch”) into functionName variable

– Read function from window object. Window object contains all globally defined functions

– Set this function to execute on every change of input field