Rebinding des événements dans jQuery après la mise à jour Ajax (updatepanel)

Question

J'en ai plusieurs en entrée et en option les éléments sur ma page, chacun (enfin presque) ont un événement attaché à la mise à jour du texte sur la page, une fois qu'elles changent. J'utilise jQuery qui est vraiment cool :)

J'utilise aussi les directives de Microsoft Ajax cadre, en utilisant l'UpdatePanel. La raison pour laquelle je fais c'est que certains éléments sont créés sur la page en fonction de certaines logique côté serveur. Je ne veux pas vraiment à expliquer pourquoi j'utilise l'UpdatePanel - même si elle le pouvait (il peut avec très peu d'effort) être réécrit pour utiliser uniquement jQuery , je veux encore que UpdatePanel.

Vous avez probablement deviné, une fois que j'ai une publication sur l'UpdatePanel le jQuery événements arrêts de travail. En fait je m'attendais à cela, puisque la "publication" n'est pas vraiment une nouvelle publication, donc mon code dans le document.prêt qui lie les événements à ne pas être déclenché à nouveau. J'ai également confirmé mes soupçons par la lecture sur dans le jQuery aider les bibliothèques.

De toute façon je suis à gauche avec le problème de la reliaison mes contrôles après l'UpdatePanel est fait la mise à jour de la DOM. J'ai de préférence besoin d'une solution qui ne nécessite pas l'ajout de plus .fichiers js (jQuery plugins) à la page, mais quelque chose d'aussi simple que d'être en mesure de prendre le contrôle UpdatePanel "afterupdating" où je peux appeler ma méthode pour relier tous les éléments du formulaire.

Answer 1

Puisque vous utilisez ASP.NET AJAX, vous aurez accès à un gestionnaire d'événements pageLoad , appelé chaque fois que la page sera publiée, qu'elle soit complète ou partielle à partir d'un UpdatePanel. Vous avez juste besoin de mettre la fonction dans votre page, aucune connexion n’est requise.

 function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}
 

Answer 2

Ou vous pouvez vérifier la fonctionnalité en direct de la dernière version de jQuery via la méthode on() .

Answer 3

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

Answer 4

Comme de jQuery 1.7, la méthode recommandée pour ce faire est d'utiliser du jQuery .() la syntaxe.

Cependant, assurez-vous que vous avez configuré l'événement sur le document de l'objet, pas l'objet DOM lui-même. Par exemple, ce sera la rupture après l'UpdatePanel de publication:

$(':input').on('change', function() {...});

... parce que le ':facteurs de production " ont été réécrits. Faire ceci à la place:

$(document).on('change', ':input', function() {...});

Tant que le document est autour, toutes les entrées (y compris ceux de l'UpdatePanel actualise) déclenche le changement de gestionnaire.

Answer 5

Utilisez le code suivant

 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}