A
A
admin4eg2011-10-08 13:43:19
JavaScript
admin4eg, 2011-10-08 13:43:19

Google chrome jQuery .change event not firing?

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 the question

In order to leave comments, you need to log in

3 answer(s)
L
Lakewake, 2011-10-08
@vedmaka

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

I
iStyx, 2011-10-08
@iStyx

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

M
mrspd, 2011-10-09
@mrspd

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question