Question

I’m using jquery and jquery mobile to build a site.

I have a screen where the user can type in some filters and when the input is change some event is triggered.

The problem is that the input field is defined with data-type="search":

<input placeholder="Filter items..." data-type="search" class="filter" value="" I18N="FILTER_ITEMS" data/>

so Jquery mobile automatically adds an ‘X’ icon for clearing the search field.

and in my js i have bound a change event to the input field so once the user tabs out of the field it will trigger:

$('.textFilter .filter').change(function(){
            FILTER_OBJ.addTextFilters($(this));
 });

But it is also triggered when the user click the ‘X’ button added by jquery mobile, so how can i know when it is triggered by the ‘X’ button so i can ignore it?

Answer 1

There should be no difference between the data being cleared by the X click compared to when a user empties the field manually.

Both actions will clear the data from the input box and as such it would make sense for both triggering the change event and be treated the same.

As you noted in your response in the comments on the original post, any code you add to check for empty values should work regardless which actions caused the input box to be emptied.