web-dev-qa-db-fra.com

Comment relier un événement après l'enregistrement du widget

J'écris un widget dont les éléments de formulaire sont associés à un événement de clic. Je le lie en utilisant jQuery.

Cependant, après avoir cliqué sur save, les liaisons sont perdues. Autrement dit, cliquer sur ces éléments ne déclenche plus la fonction.

J'ai essayé d'utiliser la méthode on() jQuery, comme suggéré ici , mais cela n'aide pas:

    var buttonsHolder=jQuery('#widgets-right .icon_buttons');            
    // save the array of big icons, for later reference, and assign them the click event
    var  buttons=buttonsHolder.children('input');
    buttons.on("click",function(){
        openPanel(jQuery(this),jQuery(this).index());
    });

Je pourrais mettre mon code js dans le formulaire du widget, comme suggéré ici . Cela résout le problème, mais je préfère vraiment garder mon code js séparé.

Que dois-je faire pour que l'événement click de ces éléments continue de fonctionner même après avoir cliqué sur le bouton save?

widgetsjquery
4
Lea Cohen

Comme la boîte de saisie est en train d'être reconstruite (ou la totalité du formulaire), j'ai suivi les conseils qui m'ont été donnés ailleurs et au lieu de lier () à une boîte de saisie, je la lie plus haut et utilise la délégation d'événements:

jQuery('#widgets-right').on('click','.icon_buttons input',function(){
     openPanel(jQuery(this),jQuery(this).index());
});

Je place toujours quelques déclarations de variable js dans le formulaire du widget, mais ce n'est que par commodité, et ce ne sont que quelques lignes de code, donc cela ne me dérange pas trop.

0
Lea Cohen

Wordpress fournit des rappels pour les interactions avec les widgets. Vous semblez intéressé par deux d'entre eux:

widget-added, widget-updated

Exemple d'utilisation:

jQuery(document).on('widget-updated', function(e, widget){
    // do your awesome stuff here
    // "widget" represents jQuery object of the affected widget's DOM element
});
6
Sergey Arefiev

J'ai ajouté votre code et il a été corrigé pour le widget mis à jour, c.-à-d. Lorsque je mets à jour le widget, toutes les options fonctionnent correctement. Mais maintenant que j'ajoute un nouveau widget, cela ne fonctionne pas bien tant que je n'ai pas actualisé la page ou cliqué sur Enregistrer une fois.

J'essaye de corriger le code ci-dessous dans mon projet:

$( document ).on( 'widget-updated' , function( event, $widget ){
    $('.of-color').wpColorPicker();
    $('.selectpicker').selectpicker();
});

J'ai aussi essayé comme ça

$( document ).on( 'widget-updated widget-added' , function( event, $widget ){
    $('.of-color').wpColorPicker();
    $('.selectpicker').selectpicker();
});

Mais cela ne fonctionnait toujours pas pour le nouveau widget ajouté. S'il vous plaît aider à résoudre ce problème.

Merci.

0
Adeel