我有一个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,如果您也能帮助我,那就太好了)
提前向大家表示感谢。