JS在正常使用但不在WordPress中使用时工作

时间:2020-07-23 作者:Kiro

我有一个shortcode that prints a simple form, 按钮用于提交表单。问题是当它被按下时,the form gets submitted normally, 忽略js函数。我不明白为什么它会这样做locally on XAMPP works (我需要改变一些东西来使js代码适应WP,但不需要改变它的行为。

这是返回表单标记的函数的代码(由add_shortcode\'s回调函数,如果需要,我将在此处添加它

function print_btn($userid, $category){
    return \'<form id="favoritefrm" action="\' . FAVORITES__PLUGIN_DIR . \'favorite_fn.php" method="POST"><input type="hidden" name="userid" id="userid" value="\' . get_current_user_id() . \'"/><input type="hidden" name="category" id="category" value="\' . get_the_category(get_the_ID())[0]->name . \'"/><button type="submit" id="heart" class="button-heart" style="[...]"></div></form>\';
    }
我的plugin\'s main file 以这种方式排列所需的样式/脚本

function aifavorites_enqueue_style() {
    $btnstyles = plugins_url( \'css/btn_styles.css\', __FILE__ );
    wp_enqueue_style(\'btncss\', $btnstyles, false);
}
 
function aifavorites_enqueue_script() {
    $favbtnscript = plugins_url( \'js/fav_btn.js\', __FILE__ );
    wp_enqueue_script(\'mojs\', \'https://cdn.jsdelivr.net/mojs/latest/mo.min.js\', array(\'jquery\'), true);
    wp_enqueue_script(\'jquery\');
    wp_enqueue_script(\'favjs\', $favbtnscript, array(\'jquery\', \'mojs\'), true);
    wp_localize_script(\'favjs\', \'myScript\', array(
    \'pluginsUrl\' => FAVORITES__PLUGIN_DIR,
));
}
 
add_action( \'wp_enqueue_scripts\', \'aifavorites_enqueue_style\' );
add_action( \'wp_enqueue_scripts\', \'aifavorites_enqueue_script\' );
这个js file that\'s giving me problems 具有以下内容:

jQuery( document ).ready(function() {
var scaleCurve = mojs.easing.path(\'M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0\');
   var el = document.querySelector(\'.button-heart\'),
    // mo.js timeline obj
    timeline = new mojs.Timeline(),

    // tweens for the animation:

    // burst animation
    tween1 = new mojs.Burst({
        parent: el,
  radius:   { 0: 100 },
  angle:    { 0: 45 },
  y: -10,
  count:    10,
   radius:       100,
  children: {
    shape:        \'circle\',
    radius:       30,
    fill:         [ \'red\', \'white\' ],
    strokeWidth:  15,
    duration:     500,
  }
    });


    tween2 = new mojs.Tween({
        duration : 900,
        onUpdate: function(progress) {
            var scaleProgress = scaleCurve(progress);
            el.style.WebkitTransform = el.style.transform = \'scale3d(\' + scaleProgress + \',\' + scaleProgress + \',1)\';
        }
    });
        tween3 = new mojs.Burst({
        parent: el,
  radius:   { 0: 100 },
  angle:    { 0: -45 },
  y: -10,
  count:    10,
   radius:       125,
  children: {
    shape:        \'circle\',
    radius:       30,
    fill:         [ \'white\', \'red\' ],
    strokeWidth:  15,
    duration:     400,
  }
    });

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);


// when clicking the button start the timeline/animation:
jQuery("#favoritefrm").on("submit",function(e){
    alert("submitted");
    e.preventDefault();
    var href = myScript.pluginsUrl + \'/aifavorites/favorite_fn.php\';
    if (jQuery(\'#heart\').hasClass(\'active\')){
        jQuery.ajax({
                   type: "POST",
                   url: href,
                   data: jQuery(\'#favoritefrm\').serialize() + "&action=remove",
                   success: function(msg){
                    alert(\'submitted\');
                    jQuery(\'#heart\').removeClass(\'active\')                         }
                 })
    }
    else{
        jQuery.ajax({
                   type: "POST",
                   url: href,
                   data: jQuery(\'#favoritefrm\').serialize() + "&action=add",
                   success: function(msg){
                    alert(\'submitted\');
                    timeline.play()
                    jQuery(\'#heart\').addClass(\'active\')                         }
                 })
    }
});
});
这个jQuery( document ).ready 函数调用成功,我尝试在其下方放置一个警报,它立即出现。All the required scripts are loaded, 我通过在Inspect Element中搜索来手动检查两者;“元素”;和;来源“;选项卡(根据Opera浏览器的调用方式)。

应该发生什么可以在我的非wordpress网站上看到here

我做错了什么?(我知道要解决这个问题,需要处理ajax,但我很难理解如何将代码转换为wp ajax,如果您也能帮助我,那就太好了)

提前向大家表示感谢。

1 个回复
最合适的回答,由SO网友:Kiro 整理而成

已解决。

问题是mojs has to be included between the <body></body> tags, 以及将MOJ排入队列的wp\\u enqueue\\u script()函数needed an empty string as argument just before the \'true\' parameter我忘了指定该脚本没有所需的版本号)。

所以,改变

wp_enqueue_script(\'mojs\', \'https://cdn.jsdelivr.net/mojs/latest/mo.min.js\', array(\'jquery\'), true);
wp_enqueue_script(\'favjs\', $favbtnscript, array(\'jquery\', \'mojs\'), true);

wp_enqueue_script(\'mojs\', \'https://cdn.jsdelivr.net/mojs/latest/mo.min.js\', array(\'jquery\'), \'\', true);
wp_enqueue_script(\'favjs\', $favbtnscript, array(\'jquery\', \'mojs\'), \'\', true);
成功了。