首頁>Web>source

我有个 shortcode that prints a simple form ,一个按钮用於提交表單.問题是当按下它時, the form gets submitted normally ,忽略js函式.我不明白為什麼要這麼做,因為尝試了這種方式 (我需要更改一些內容以使js代碼適應wP,但是没有什麼可以改變其行為的。

這是返迴表單標記的函式代碼(由 locally on XAMPP works呼叫 的回撥函式,如果需要,我会在此處添加它

add_shortcode

我的 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 ,我通過在"檢查元素""元素"和"源"選項卡中进行搜尋手動进行了檢查(根据Opera瀏覽器的呼叫方式)。

應该發生什麼,可以在我的非wordpress網站上看到 All the required scripts are loaded

我在做什麼錯? (我知道解決了這个問题,有一个ajax可以處理,但是我正在努力了解如何將我的代碼轉換為wp ajax,如果您能帮助我的话也很棒)

預先感谢大家。

here
最新回復
  • 10月前
    1 #

    已解決。

    問题在於 mojs has to be included between the 威兹威兹 標簽 ,以及將mojs <body></body>入队的wp_enqueue_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);

  • schema.org:結構化資料測試工具抱怨圖像網址(INVALID_URL)
  • google analytics:查詢將404 URL發送到我的網站的外部網站