[英]Simple Javascript not working in Wordpress / WooCommerce plugin
下面的代碼是一個簡單的插件,它向wooCommerce產品頁面(前端)添加一個新選項卡,然后向該選項卡添加一個按鈕。 我想要它做的是在單擊按鈕時彈出警報。 我知道,這非常簡單,但我創建它是為了試圖弄清楚為什么更復雜的腳本無效。
到目前為止,選項卡存在,按鈕存在,但是當我點擊按鈕時沒有任何反應。 我已檢查以確保腳本實際上已加載,並且我已確認它確實存在於頁面的源代碼中。 如果我直接在瀏覽器中加載源代碼中的javascript文件路徑,它會顯示正確的代碼。
此外,如果我使用javascript代碼和按鈕(所以沒有任何wordpress的東西)制作一個簡單的html文件,它的效果非常好。
此外,我已經在php文件中直接添加了一個簡單的警報命令到html輸出,這也可以正常工作。
這讓我相信這個問題與ID有關,但我不知道該怎么做。
這是php文件(為清楚起見,減去插件頭):
<?php
//runs addScripts
add_action( 'wp_enqueue_scripts', 'addScripts' );
// enqueues jquery and test1.js files. Inspecting html shows these are loaded.test1.js is loaded in footer.
function addScripts(){
wp_enqueue_script( 'jquery', plugins_url( 'jquery.js', __FILE__ ));
wp_enqueue_script( 'test1', plugins_url( 'test1.js', __FILE__ ),array('jquery'),1,true);
}
// creates new tab in woocommerce
add_filter( 'woocommerce_product_tabs', 'woocommerce_product_custom_tab' );
// function defining test_tab
function woocommerce_product_custom_tab($tabs) {
$tabs['test_tab'] = array(
'title' => __( 'New Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
// content of new tab, and where the javascript is supposed to work.
function woo_new_product_tab_content() {
echo <<<END
<button id="mybutton" type="button">Click Me</button>
<script type="text/javascript" src="test1.js"></script>
<script type="text/javascript">
<!--test1();//--></script>
<script type="text/javascript"> alert('ALERT!') </script>
END;
}
?>
這是包含javascript函數的test1.js:
function test1(){
$( "#mybutton" ).click(function( event ) {
alert ('Hello')
});
}
test1.js中的#mybutton是否可能沒有將函數引導到php / html中的'mybutton'按鈕?
謝謝你的幫助!
更新:我現在在php echo中使用以下功能按鈕:
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#mybutton" ).click(function( event ) {
alert ('Hello')});
});
</script>
但以下不起作用:
<script type="text/javascript">
jQuery(document).ready(function($) {
test1(); });
</script>
使用之前的test1.js。
更新2
因此,雖然下面的答案最終得到了代碼的工作,但這個試驗的更復雜的東西卻失敗了。 通過執行以下操作,我終於讓它工作了(這可能不是最優雅的解決方案):
add_action('wp_head', 'DPG_execute_script');
function DPG_execute_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// javascript goes here.
});
</script>
<?php
}
我無法使用echo <<
如果您在wordpress中使用jQuery函數,則必須使用以下方法之一:
如果您希望在加載文檔后執行代碼:
jQuery(document).ready(function($) { // Code here will be executed on document ready. Use $ as normal. });
如果要在匿名函數中執行代碼,請確保將jQuery作為參數傳遞:
(function($) { // Your jQuery code goes here. Use $ as normal. })(jQuery);
編輯:這是我將如何實現代碼:
<button id="mybutton" type="button">Click Me</button>
<script type="text/javascript">
jQuery("#mybutton").click(function() {
alert ('Hello')
});
</script>
重要提示:必須在按鈕后調用腳本!
只需使用此代碼(確保首先調用jquery):
<button id="mybutton" type="button">Click Me</button>
<script>
$( "#mybutton" ).click(function( event ) {
alert ('Hello');
});
</script>
成功測試: http : //jsfiddle.net/k664U/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.