在页面上的WordPress的嵌入式JavaScript不起作用 [英] Wordpress embedded javascript on page doesn't work

问题描述

我试图复制下面的JSFiddle：
https://jsfiddle.net/7nbr6 / 10 /

在我的WordPress网站上。

当我将它复制到网站上时当我点击按钮时不会做任何事情。

我使用这个插件将javascript放到我的页面上：
https://wordpress.org/plugins/css-javascript-toolbox/

HTML：

 <！ - 为了它的乐趣而抛出一个漂亮的字体 -  - > 
< link rel =stylesheettype =text / csshref =http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200> 
< div id =wrap> 
< h2>凯利计算器< / h2> 
< div class =formStyles> 
< input id =probabilitytype =textvalue =Probability>< br> 
< input id =赔率type =textvalue =赔率>< br> 
< input id =balancetype =textvalue =Balance>< br> 
< input id =submittype =submitvalue =Submit> 
< input id =resettype =resetvalue =Reset> 
< div id =result>< / div> 
< / div> 
< / div> 
  

Javascript：

 < script type =text / javascript> $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' '（＃（＃））。val（）; 
 var balance = jQuery（'＃balance'）。val（）; 
 result = parseFloat（（（probability / 100）*（odds  -  1）/ （赔率-1）*赔率-1）.toFixed（4））* 0.95; 
 var stake =（（balance / 100）* parseFloat（（result * 100）.toFixed（2）））
'jQuery（'＃result'）。text（（result * 100）.toFixed（2）+'％'+ balance +'€'+ stake +'€'）; 
}）; 
< / script> 
  

代码绝对嵌入到页面标题中（通过查看页面源可见），但按钮不行。

我最初认为这是noConflict（）的一个问题，在这里详细介绍：
TypeError：$在调用jQuery函数时不是函数

我在编辑器（插件内部）中也有这个错误，但当我导航到页面时，它不会出现在控制台中：

< a href =https://i.imgur.com/3FKt1Mi.png =nofollow> https://i.imgur.com/3FKt1Mi.png

我尝试删除脚本标记，但随后将其作为文本标记在标题中。

感谢您的帮助

解决方案

在DOM准备就绪之前，您正试图将处理程序附加到元素。将代码封装在就绪处理程序中可解决此问题：

  jQuery function（）{
 jQuery（'＃submit'）。on（'click'，function（）{
 var probability = jQuery（'＃probability'）。val（）; 
 var odds ='jQuery（'＃odds'）。val（）; 
 var balance = jQuery（'＃balance'）。val（）; 
 result = parseFloat（（（probability / 100）* - （1）/（赔率-1）*赔率 -  1）.toFixed（4））* 0.95; 
 var stake =（（balance / 100）* parseFloat（（result * 100）.toFixed（2）） ）
 jQuery（'＃result'）。text（（result * 100）.toFixed（2）+'％'+ balance +'€'+ stake +'€'）; 
 }）; 
}）; 
  

包装在JavaScript中的代码是jQuery的 .ready 事件。

I'm trying to copy the following JSFiddle: https://jsfiddle.net/7nbr6/10/

Onto my WordPress site.

When I copy it onto the site it doesn't do anything when I click the buttons.

I am using this plugin to put the javascript onto my page: https://wordpress.org/plugins/css-javascript-toolbox/

HTML:

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200">
<div id="wrap">
<h2>Kelly calculator</h2>
    <div class="formStyles"> 
        <input id="probability" type="text" value="Probability"><br>
        <input id="odds" type="text" value="Odds"><br>
        <input id="balance" type="text" value="Balance"><br>
        <input id="submit" type="submit" value="Submit">
        <input id="reset" type="reset" value="Reset">
        <div id="result"></div>
    </div>
</div>

Javascript:

<script type="text/javascript">
jQuery('#submit').on('click', function() {
    var probability = jQuery('#probability').val();
    var odds = jQuery('#odds').val();
    var balance = jQuery('#balance').val();
    result = parseFloat(((probability/100)* (odds - 1) / (odds - 1) * odds - 1).toFixed(4)) * 0.95;
    var stake = ((balance / 100) * parseFloat((result * 100).toFixed(2)))
    jQuery('#result').text((result * 100).toFixed(2) + '% of' + balance + '€ which is ' +stake + '€');
});
</script>

The code is definitely embedded into the page header (visible by viewing the page source), but the buttons don't work.

I initially thought it was an issue with noConflict() detailed here: TypeError: $ is not a function when calling jQuery function

I also have this error in the editor (inside the plugin), but it doesn't appear in the console when I navigate to the page:

https://i.imgur.com/3FKt1Mi.png

I tried removing the script tags, but then it would just put it into the header as text.

Thanks for your help

解决方案

You're trying to attach a handler to an element before the DOM is ready. Wrapping the code inside a ready handler resolves this issue:

jQuery(function() {
    jQuery('#submit').on('click', function() {
        var probability = jQuery('#probability').val();
        var odds = jQuery('#odds').val();
        var balance = jQuery('#balance').val();
        result = parseFloat(((probability/100)* (odds - 1) / (odds - 1) * odds - 1).toFixed(4)) * 0.95;
        var stake = ((balance / 100) * parseFloat((result * 100).toFixed(2)))
        jQuery('#result').text((result * 100).toFixed(2) + '% of' + balance + '€ which is ' +stake + '€');
    });
});

The code wrapped around your JavaScript is shorthand for jQuery's .ready event.

这篇关于在页面上的WordPress的嵌入式JavaScript不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！