简单的Javascript在Wordpress/WooCommerce插件中不起作用

Simple Javascript not working in Wordpress / WooCommerce plugin

本文关键字：WooCommerce 插件 不起作用 Wordpress Javascript 简单      更新时间：2023-09-26

下面的代码适用于一个简单的插件，它可以在wooCommerce产品页面（前端）中添加一个新的选项卡，然后在该选项卡中增加一个按钮。我希望它在单击按钮时弹出一个警报。我知道这非常简单，但我创建它是为了找出为什么一个更复杂的脚本不起作用。

到目前为止，选项卡和按钮都存在，但当我点击按钮时，什么都没有发生。我已经检查以确保脚本确实正在加载，并且我已经确认它确实存在于页面的源代码中。如果我直接在浏览器中从源代码加载javascript文件路径，它会显示正确的代码。

此外，如果我用javascript代码和按钮（所以没有wordpress的东西）制作一个简单的html文件，它会非常好地工作。

此外，我在php文件的html输出中直接添加了一个简单的alert命令，这也很好。

这让我相信这个问题与身份证有关，但我不知道该怎么办。

以下是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<lt

如果您在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/

相关文章：