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?
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 data
es 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.
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.