jQuery + PHP + JavaScript + Wordpress: HTML按钮调用点击

jQuery + PHP + JavaScript + Wordpress: HTML Button call on click

本文关键字：按钮 调用 HTML PHP JavaScript Wordpress jQuery      更新时间：2023-09-26

好吧，我已经读过无数类似问题的尝试答案，但不管出于什么原因，它们都不适合我。我有一个WordPress网站，我试图使一个插件，需要jQuery。

首先是我的wp-content/plugins/my-plugin/index.php页面:

    <?php
    add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 
    function wpb_adding_scripts() {
    wp_enqueue_script('TestFile', plugins_url('/js/TestFile.js', __FILE__), array('jquery'),'1.1', false);
    }
    ...
function printButton(){
echo '<input type ="button" id="myButton" name="myButton" value="My Button"/>';
}
我在代码中调用了十几次printButton，并且检查了HTML以确保它与所写的一致。如果用户单击这12个按钮中的任何一个，我希望运行相同的jQuery调用。我还确保jquery本身在WordPress的头文件中排队，因此它肯定知道jquery存在。当我执行Inspect Element视图时，当我单击时，控制台没有弹出任何错误。 然后是我的TestFile.js文件: 
jQuery(function() {
    jQuery('#myButton').click(function(e){
    alert("Button Clicked!");
    });
  });

我知道我应该能够使用'$'而不是'jQuery'，但无论出于何种原因，WordPress是愚蠢的。从我读过的所有内容来看，这是非常简单的东西我应该在点击任何按钮时得到一个小警告弹出框。遗憾的是，当我点击…

想法?非常感谢您的帮助!

不要把动作绑定到ID，把它绑定到一个类。

ID必须是唯一的元素。如果你有十几个按钮都带有id='myButton'，那么没有一个按钮会被jQuery正确绑定。

应该绑定到像

这样的类指定:
function printButton(){
    echo '<input type ="button" class="aButton" name="myButton" value="My Button"/>';
}
然后jQuery会读取 
jQuery(function() {
    jQuery('.myButton').click(function(e){
    alert("Button Clicked!");
    });
 });

为类使用相同的名称。考虑到"myButton"是jQuery-function中期望的名称，将"function printButton"中的类更改为:

function printButton(){
    echo '<input type ="button" class="myButton" name="myButton" value="My Button"/>';
}
  1. 你的ID必须是唯一的。
  2. 尝试使用jQuery(selector).on( ... );
相关文章：