web-dev-qa-db-ja.com

ウィジェット開発におけるjQueryの使用

私はjQuery（スライド、要素のフェード）で魔法をかけるウィジェットを開発しています。問題は、サイドバーでウィジェットを削除してから置き換えると、ウィジェットに添付されているjQueryスクリプトが呼び出されないことです。

私はフォームの機能にこのようなものがあっても：

public function form( $instance ) {

    wp_register_script('script', get_template_directory_uri() . '/script.js', array('jquery'), null, true);
    wp_enqueue_script('script');
}

スクリプトはページに存在しますが（私がview source存在する場合）、document.ready関数はトリガーされないため、すべてのonclickアクションは無効になります。

ページを更新すると問題は解決しますが、これを解決する方法はありますか。

document.on("widget-attached-to-sidebar", function(){});のようなものが必要です

編集：

この問題を再現する手順

  • refresh the page
  • my jQuery script works
  • delete the widget
  • add it again
  • my jQuery script is not working anymore (need to refresh the page again)

Script.jsは、これらすべてのステップを通じてページ（view source）にまだ残っています。

widgetsjquery
2
TGeorge

DOMNodeInsertedイベントにフックして、ウィジェットがいつサイドバーに追加されたかを調べることができます。

jQuery(document).on('DOMNodeInserted', '.widget-top', function () {
      alert(jQuery('.widget-title', this).text());
});

上記のコードは新しく追加されたウィジェットに警告します。新しく作成されたウィジェットに夢中になったら、それをトラバースして特定のクラスを見つけ、それが追加されたのが自分のウィジェットであればアクションを起こすことができます。

Firefoxでのみテスト済み。

あなたはこのjQuery質問でより多くの情報を見つけることができます https://stackoverflow.com/questions/15268661/jquery-on-create-event-for-dynamically-created-elements

1
Michael Khalili

私はこれを信用することはできませんが、それでも答えを探している人のためにそれを共有しなければなりません。私は自分が取り組んでいるものに必要です。

もう少し検索したところ、ユーザーから この答えが になりました。 George ターゲットとしている特定のウィジェットを絞り込みます。

var $_count = 0;
jQuery( document ).ajaxStop( function(){
    var 
    $_saveBtns = jQuery('.widget-control-save'),
    $_yourSave = '';
    $_saveBtns.each( function(){
        if( jQuery(this).is('[id*="your-widget-id-string"]') ){
            $_yourSave = jQuery(this);
        }
    });

    if ( $_count <= $_yourSave.length ){
        /* Your script/function here */
        $_count++;
    }
    else {
        $_count = 0;
        return;
    }

});
0
mroncetwice

"widget-added"トリガーを使ってみてください。

詳細情報： https://core.trac.wordpress.org/ticket/19675#comment:12

0
Otto

チェック is_active_widget（） をウィジェットの外側のどこかに使用して、ウィジェットがページ上でアクティブかどうかに基づいてスクリプトを条件付きでロードする最善の方法だと思います。クラスとそれをwp_enqueue_scriptsにフックします。このようなもの：

function my_widget_load_js() {
    if ( is_active_widget( false, false, (insert widget id-base here), true ) ) {
        wp_register_script('script', get_template_directory_uri() . '/script.js', array('jquery'), null, true);
        wp_enqueue_script('script');
    }
}
add_action ( 'wp_enqueue_scripts', 'my_widget_load_js' );
0
Caspar