web-dev-qa-db-ja.com

ウィジェットを保存した後にイベントを再バインドする方法

フォーム要素にclickイベントが添付されたウィジェットを書いています。 jQueryを使ってバインドします。

ただし、saveをクリックすると、バインディングは失われます。つまり、それらの要素をクリックしても機能は起動しません。

here として提案されているように、私はon() jQueryメソッドを使用しようとしました、しかしそれは助けにはなりません：

    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());
    });

here のように、ウィジェットフォームの中にjsコードを入れることができます。これで問題は解決しますが、私はjsコードを分離しておくことを本当に望みます。

saveボタンがクリックされた後もそれらの要素のclickイベントを機能させ続けるために何をする必要がありますか？

widgetsjquery
4
Lea Cohen

入力ボックスが再構築されているので（またはフォーム全体）、私はどこか他のところで私に与えられたアドバイスに従い、入力ボックスにon（）をバインドする代わりにそれをもっと上にバインドしてイベント委任を使います：

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

私はまだウィジェットフォームの中にいくつかのjs変数宣言を置いています、しかしそれは単に便宜上のものであり、そしてそれはほんの数行のコードであるので、私はそれをあまり気にしません。

0
Lea Cohen

Wordpressはウィジェットインタラクションのためのコールバックを提供します。あなたはそれらのうちの2つに興味があるようです。

ウィジェット追加、ウィジェット更新

使用例

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

私はあなたのコードを追加しました、そしてそれはwidget-updatedのために修正されました。しかし、今、私が新しいウィジェットを追加するとき、それは私がページをリフレッシュするか、または一度saveを押すまではうまくいきません。

プロジェクト内の以下のコードを修正しようとしています。

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

私もこうやってみました

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

しかし、それでも新しく追加されたウィジェットに対しては機能しませんでした。この問題を解決するために助けてください。

ありがとう。

0
Adeel