Nach der Neuzuordnung von jQuery zu $ ​​in meinem WordPress-Theme kann ich keine Funktionen mehr von außerhalb der js-Datei auslösen

Lesezeit: 4 Minuten

Benutzeravatar von Sinister Beard
Finsterer Bart

Ich arbeite an einem WordPress-Theme mit viel jQuery drin. Standardmäßig lässt WordPress die Verwendung von nicht zu $ Verknüpfung und Sie müssen die volle verwenden jQuery stattdessen – z jQuery('.class') statt $('.class').

Das ist kein allzu großer Aufwand für ein paar Codezeilen, aber ich habe jetzt eine Menge, also habe ich neu zugeordnet jQuery zu $ mit:

(function($){

    ...my functions here...

})(window.jQuery);

Dies funktioniert gut für Funktionen, die aus dieser Datei ausgelöst werden, aber wenn ich Inline-Trigger in PHP verwende, funktionieren sie nicht mehr. Zum Beispiel:

<a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>

Hat vor dem Remapping gut funktioniert, aber jetzt nicht mehr. Ich kann das Ereignis nicht wie gewohnt in die js-Datei einbinden, da ich dann nicht auf die benötigten PHP- und WordPress-Funktionen zugreifen kann – es sei denn, mir fehlt etwas. Das würde zum Beispiel nicht funktionieren:

$( "#target" ).click(function() {    
    loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)    
});

Gibt es eine Möglichkeit, dies zu umgehen?

Benutzeravatar von TJ Crowder
TJ Crowder

Das Problem ist, dass Ihre Funktionen nicht mehr global sind. Das ist eine gute Sache™. (Warum siehe unten.)

Gibt es eine Möglichkeit, dies zu umgehen?

Bei weitem der beste Weg wäre zu nicht Verknüpfen Sie solche Ereignisse. Halten Sie stattdessen Ihren Code und Ihr Markup getrennt und verbinden Sie Ihre Funktionen mit jQuery on und ähnliches. Siehe unten für mehr.

Aber wenn Sie das Gefühl haben, dass Sie müssen, können Sie Ihre Funktionen global machen, indem Sie sie als Eigenschaften zuweisen window:

(function($) {
    window.loadFullPost = function() {
        // ...
    };
)(jQuery);

oder

(function($) {
    function loadFullPost() {
        // ...
    }

    window.loadFullPost = loadFullPost;
)(jQuery);

Also, wie würden Sie tun

<a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>

…ohne eine globale Funktion zu verwenden? So was:

<a class="load-full-post" data-permalink="<?=get_permalink()?>" data-ajax=true data-post-name="<?=$post->post_name?>" data-post-id="<?=$post->ID?>">Read more</a>

und dann ein Handler für sie

$(document).on("click", ".load-full-post", function() {
    var link = $(this);
    // Use the values from link.attr("data-permalink") and such
    // to do the work
});

Oder wenn Sie Ihre vorhandene verwenden möchten loadFullPost Funktion:

$(document).on("click", ".load-full-post", function() {
    var link = $(this);
    return loadFullPost(
        link.attr("data-permalink"),
        link.attr("data-ajax") === "true",
        link.attr("data-post-name"),
        +link.attr("data-post-id")  // (+ converts string to number)
    );
});

Ich sollte erwähnen, dass Sie Leute bekommen, die Ihnen sagen, dass Sie auf diese zugreifen sollen data-* Attribute über die data Funktion. Du kann tun, aber es sei denn, Sie verwenden die verschiedenen zusätzlichen Funktionen von dataes ist unnötiger Overhead (Erstellen des jQuery-Cache für die Daten usw.). data ist nicht eine Zugriffsfunktion für data-* Attribute, es ist viel mehr (und weniger) als das.

Sie können Ihre Informationen auch als JSON übergeben:

<a class="load-full-post" data-postinfo="<?=htmlspecialchars(json_encode(array("permalink" => get_permalink(), "ajax" => true, "name" => $post->post_name, "id" => $post->ID))0?>">Read more</a>

(oder so ähnlich, mein PHP-fu ist schwach)

Dann:

$(document).on("click", ".load-full-post", function() {
    var postInfo = JSON.parse($(this).attr("data-postinfo"));
    return loadFullPost(
        postInfo.permalink,
        postInfo.ajax,
        postInfo.name,
        postInfo.id
    );
});

Warum es eine gute Sache ist, Ihre Funktionen nicht global zu machen: Der globale Namespace ist es sehr überfüllt, besonders wenn Sie es mit mehreren Skripten und Plugins und WordPress selbst zu tun haben. Je mehr Globals Sie erstellen, desto größer ist die Wahrscheinlichkeit, dass es zu Konflikten mit einem aus einem anderen Skript kommt. Indem Sie Ihre Funktionen gut in Ihrer Scoping-Funktion enthalten haben, vermeiden Sie die Möglichkeit, auf die Funktion/das Element/was auch immer eines anderen herumzutrampeln und umgekehrt.

  • Ausgezeichnete Antwort und Erklärung

    – Studiozeit

    16. Oktober 2015 um 7:27 Uhr

  • Danke dafür – ausgezeichnete Erklärung nicht nur des Wie, sondern auch des Warum. Es funktioniert und schneller als zuvor! Ich habe das zweite Beispiel verwendet (Aufruf mit einer nicht globalen Funktion, aber unter Verwendung der vorhandenen Funktion), da es auch an anderer Stelle aufgerufen wird. Eine sehr geringfügige Änderung war erforderlich, da die Ajax-Kriterien tatsächlich als Teil des Links festgelegt werden, im Gegensatz zu seiner eigenen Dateneingabe, aber dies ging aus meiner Frage nicht hervor.

    – Finsterer Bart

    16. Oktober 2015 um 7:57 Uhr

Sie können dem Fenster Funktionen aus Ihrem Gehäuse wie folgt hinzufügen:

(function($){

    function loadFullPost(...) {
        ...
    }

    window.loadFullPost = loadFullPost;

}).(window.jQuery);

Dann wird Ihre Funktion für das Onlick-Attribut usw. sichtbar sein.

1390840cookie-checkNach der Neuzuordnung von jQuery zu $ ​​in meinem WordPress-Theme kann ich keine Funktionen mehr von außerhalb der js-Datei auslösen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy