jQuery ajax problème avec la recherche

Question

Je travaille sur la fonctionnalité de recherche d'images dans un div ajax qui charge également les données dans un conteneur div.

J'ai le code suivant et cela fonctionne très bien, si je n'exécute aucun critère de recherche. Si j'ajoute la recherche, il jette une erreur dans tous les navigateurs dans le fichier jquery min.js. J'utilise la version 1.11.1 pour cela. Différents navigateurs montrent différentes erreurs.

Code jQuery:

$(document).ready(function() { 
    $("#finder").blur(executeFunction); 
    function executeFunction(page) { 
     page = typeof parseInt(page) == "number" ? page : 1; 
     $.ajax 
     ({ 
      type: "POST", 
      url: "find.php", 
      data: { 
       page: page, 
       search: encodeURIComponent($('#finder').val()) 
      }, 
      success: function(msg) 
      { 
       $(document).ajaxComplete(function(event, request, settings) 
       { 
        $("#container").html(msg); 
       }); 
      } 
     }); 
    } 
    executeFunction(1); 
}); 

Code HTML:

<input type="finder" id="finder" /> 

Sans recherche fonctionnent tous très bien ..

Voici l'erreur que j'ai reçu dans Firefox:

TypeError: 'initUIEvent' called on an object that does not implement interface UIEvent. 

...unction(a,b){var c,d=[],e=function(a,b){b=m.isFunction(b)?b():null==b?"":b,d[d.l... 

Erreur de Chrome:

Uncaught TypeError: Illegal invocation jquery-latest.min.js:4e jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4Vc jquery-latest.min.js:4m.param jquery-latest.min.js:4m.extend.ajax jquery-latest.min.js:4loadData (index):112m.event.dispatch jquery-latest.min.js:3r.handle 

Opera Erreur:

Uncaught RangeError: Maximum call stack size exceeded 

chaque fois que je recherche, le compteur d'erreur augmente avec la même message d'erreur

IE 11 Erreur:

Argument not optional 

Answer 1

Je n'ai pas essayé recréer cette question juste une intuition.

typeof parseInt(page) == "number" 

La déclaration ci-dessus est toujours vraie. Si page est un objet-événement, la page parseInt est NaN, ce qui retournera true pour l'instruction ci-dessus.

Je pense que ce qui suit sera mieux

$("#finder").blur(function(e) { 
    executeFunction(1); 
}); 

Autres choses.

Vous liez une instance de l'ajaxCompleteEvent suivant chaque fois qu'une requête ajax est terminée. En d'autres termes, le résultat est écrit plusieurs fois sur la page.

 $(document).ajaxComplete(function(event, request, settings){ 
      $("#container").html(msg); 
     }); 

Pourquoi ne pas utiliser simplement

$("#container").html(msg); 

à sa place?