Google chrome jQuery .change event not firing?

Question

JavaScript

Have a nice day everyone, I have a problem.

I have a form
with 3 fields

<tr><br>
    <td width="180"><br>
        <select id="id_sub"> </select><br>
   </td><br>
   <td width="180"><br>
  <input id="brand" type="text" /><br>
   </td><br>
   <td width="180"><br>
  <input id="pname" type="text" /><br>
   </td><br>
   <td width="180" ><br>
       <input type="button" onclick="mySearch();" value="Найти" /><br>
   </td><br>
</tr><br>

mySearch(); - this is a JS search function that displays part of the table with results using Ajax

; there is a function that monitors when an element loses focus and searches for changed data

$(' #id_sub, #brand , #pname ').change( function() {<br>
  mySearch();<br>
  });<br>

Now the most interesting, we go to the site where this whole thing happens.
I select the first field, the event is triggered, the search is performed, the content is updated,
I write in the brand field, for example, olay, I press the tab, the event is not executed, I write anything. for example, one character and press TAB, the search is performed.



I have a question why the change event does not fire in the middle field, it does not fire in Chrome, everything is fine in FF and Opera, I don’t have IE at hand, I didn’t look at how it behaves there.

There are many topics on Google with this discussion, but it does not help me in any way.

how to be? what are the solution methods?

the page is located here (for the view, do not kick the debugging contraption no more) let me

remind you, select in the “category” field - “Acne”, press tab
in the second field we write "olay" press the tab search does not occur. in the third field, write anything, for example, "a" and put the tab search occurs.

search function, it’s a bit fancy that a js paginator has been added to the search function

var search_result = [];<br>
        var item_per_page = 5;<br>
<br>
    function mySearch(id_sub, brand, pname){<br>
      if (!id_sub) id_sub = $( '#id_sub' ).val();<br>
      if (!brand) brand = $( '#brand' ).val();<br>
            if (!pname) pname = $( '#pname' ).val();<br>
      <br>
       $.ajax({<br>
        type: 'GET',<br>
        url: '/ajax/content/',<br>
        data: 'id_sub=' + id_sub + '&brand=' + brand + '&pname=' + pname,<br>
        success: function(msg){<br>
<br>
                    search_result = [];<br>
          //$( '#results' ).html('<table id="resultTable"></table>');<br>
<br>
        <br>
          $.each($.parseJSON(msg), function (i, f) {<br>
                        var farr = [ f.ctegory, f.sub_category, f.brand, f.id, f.product_name, f.avg_score ];<br>
<br>
                        search_result[search_result.length] = farr;<br>
                        <br>
          });<br>
<br>
                    $("#Pagination").pagination(search_result.length, {<br>
                        items_per_page: item_per_page,<br>
                        callback:pageselectCallback,<br>
                        prev_text:'Пред.',<br>
                        next_text:'След.',<br>
                        load_first_page: true<br>
                    });<br>
        }<br>
      });<br>
    }<br>
<br>
        function pageselectCallback(page_index, jq)<br>
        {<br>
                // Get number of elements per pagionation page from form<br>
                var items_per_page = item_per_page;<br>
                var max_elem = Math.min((page_index+1) * items_per_page, search_result.length);<br>
                var newcontent = '<table id="resultTable">';<br>
<br>
                // Iterate through a selection of the content and build an HTML string<br>
                for(var i=page_index*items_per_page;i<max_elem;i++)<br>
                {<br>
                    newcontent += //'' +search_result[i][3]+ '</br>';<br>
                            '<tr id="ttt">\<br>
                <td width="200">'+search_result[i][0]+' -> '+search_result[i][1]+'</td>\<br>
                <td width="180" >'+search_result[i][2]+'</td>\<br>
                <td width="180"><a href="/list/'+search_result[i][3]+'">' + search_result[i][4] + '</a></td>\<br>
                <td width="180">' + search_result[i][5] + '</td>\<br>
                </tr>\<br>
              </tr>';<br>
                }<br>
                newcontent += '</table>';<br>
                // Replace old content with new content<br>
                if(search_result.length == 0)<br>
                {<br>
                        $('#results').html('Ничего не найдено, но <a href="/list/add/">можно добавить косметику в каталог</a>');<br>
                }<br>
                else<br>
                    $('#results').html(newcontent);<br>
                // Prevent click eventpropagation<br>
                return false;<br>
        };<br>

Answer 1

The event fires, look for the problem in mySearch()

Answer 2

Everything works for me in Safari and Chrome (on your page). Try disabling extensions (or enabling porn mode :)) and test without them.

Answer 3

And I always thought that change is for selects, and blur is for inputs :(