將jQuery重新映射到$在我的WordPress主題後，我不能再從js文件外部觸發功能

我正在研究一個WordPress主題，其中包含很多jQuery。默認情況下，WordPress不允許您使用$快捷方式，您必須改用完整的jQuery - 例如， jQuery('.class')而不是$('.class')。

這是不是太麻煩了的幾行代碼的，但我已經有很多了，所以我用重新映射到jQuery$：

(function($){ 

    ...my functions here... 

})(window.jQuery);

這工作正常觸發功能從該文件中，但如果我在PHP中使用任何內聯觸發器，他們不再工作。例如：

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

在重新映射之前工作正常，但現在不工作。我無法像往常一樣在js文件中綁定事件，因爲我將無法訪問我需要的PHP和WordPress功能 - 除非我錯過了一些東西。例如，這不起作用：

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

有沒有辦法解決這個問題？

來源

2015-10-15 BFWebAdmin

問題是你的函數不再是全局變量。這是一件好事™。（請參閱下面的原因。）

有沒有辦法解決這個問題？

到目前爲止最好的方法是而不是這樣的事件掛鉤。相反，保持你的代碼和標記分開，並使用jQuery的on等來連接你的函數。請參閱下文了解更多。

但是，如果你覺得你有，你可以通過在window賦予它們爲屬性讓你的功能全局：

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

或

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

    window.loadFullPost = loadFullPost; 
)(jQuery);

所以，你會怎麼辦

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

...不使用全局函數？就像這樣：

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

，然後一個處理程序爲他們

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

或者，如果你想使用現有loadFullPost功能：

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

我要指出，你會得到人民告訴你通過data功能訪問那些data-*屬性。你可以做到這一點，但除非你使用data的各種附加功能，這是不必要的開銷（爲數據創建jQuery的緩存等）。data是而不是data-*屬性的訪問函數，它比這更多（也更少）。

您也可以將您的信息作爲JSON：

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

（或類似的東西，我的PHP福弱）

然後：

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

爲什麼使你的功能非全球化是一件好事™：全球namespac e是很擁擠，特別是當你處理多個腳本和插件和Wordpress本身。您創建的全局變量越多，與另一個腳本發生衝突的機率就越大。通過將你的函數很好地包含在你的範圍函數中，你可以避免跺腳別人的函數/元素/任何東西，反之亦然。

來源

2015-10-15 13:31:34

優秀的答案和解釋 –

感謝這一點 - 不優秀解釋只有如何，但爲什麼。它的工作原理比以前更快！我使用第二個示例（使用非全局調用，但使用現有函數），因爲它也在別處調用。一個非常微小的變化是需要的，因爲ajax標準實際上被設置爲鏈接的一部分而不是其自己的數據輸入，但是從我的問題來看，這並不明確。 – BFWebAdmin

您可以從外殼到窗口中添加功能類似的：

(function($){ 

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

    window.loadFullPost = loadFullPost; 

}).(window.jQuery);

那麼你的功能將是點擊數屬性可見等

來源

2015-10-15 13:34:37 kersjous

將jQuery重新映射到$在我的WordPress主題後，我不能再從js文件外部觸發功能

回答

相關問題