it-swarm.com.de

Verwenden von jQuery bei der Widget-Entwicklung

Ich arbeite an einem Widget, das mit jQuery etwas zaubert (Folie, verblasst Elemente). Das Problem ist, dass das an das Widget angehängte jQuery-Skript nicht aufgerufen wird, wenn ich das Widget lösche und dann in der Seitenleiste ersetze.

Auch wenn ich in der Form so etwas funktioniere:

public function form( $instance ) {

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

Das Skript ist auf der Seite vorhanden (wenn ich view source bin, ist es dort), aber die document.ready-Funktion wird nicht ausgelöst, sodass alle Onclick-Aktionen deaktiviert sind.

Durch das Aktualisieren der Seite wird das Problem behoben, aber gibt es eine Möglichkeit, das Problem irgendwie zu beheben?

Ich brauche so etwas wie document.on("widget-attached-to-sidebar", function(){});

BEARBEITEN:

Schritte zum Reproduzieren dieses Problems:

  • 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)

Die Datei script.js befindet sich weiterhin auf der Seite (view source) für alle diese Schritte.

2
TGeorge

Sie können sich in das Ereignis DOMNodeInserted einhängen, um herauszufinden, wann Ihr Widget zur Seitenleiste hinzugefügt wurde.

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

Der obige Code weist auf neu hinzugefügte Widgets hin. Sobald Sie mit dem neu erstellten Widget verbunden sind, können Sie es überqueren, um Ihre spezifische Klasse zu finden und Maßnahmen zu ergreifen, wenn es Ihr Widget ist, das hinzugefügt wurde.

Nur mit Firefox getestet.

Weitere Informationen erhalten Sie mit dieser jQuery-Frage https://stackoverflow.com/questions/15268661/jquery-on-create-event-for-dynamically-created-elements

1
Michael Khalili

Ich kann das nicht gutschreiben, muss es aber für diejenigen weitergeben, die immer noch nach einer Antwort suchen. Die gewählte Antwort hat beim Laden von Seiten und beim Speichern von Widgets funktioniert, aber beim Hinzufügen von Widgets nichts unternommen Ich benötige für das, woran ich arbeite.

Nach ein bisschen mehr Suche stieß ich auf diese Antwort vom Benutzer, George , die ich ein bisschen weiter angepasst habe, um sie auf die speziellen Widgets abzustimmen, auf die ich abziele:

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

Versuchen Sie es mit dem Auslöser "Widget hinzugefügt".

Weitere Informationen: https://core.trac.wordpress.org/ticket/19675#comment:12

0
Otto

Ich denke, der beste Weg, um ein Skript bedingt zu laden, basiert darauf, ob das Widget auf der Seite aktiv ist, indem Sie is_active_widget () an einer anderen Stelle außerhalb der Widget-Klasse markieren und es mit wp_enqueue_scripts verknüpfen. Etwas wie das:

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