javascript - 页面上的 Wordpress 嵌入式 javascript 不起作用

Question

我正在尝试复制以下 JSFiddle: https://jsfiddle.net/7nbr6/10/

进入我的 WordPress 网站。

当我将它复制到站点上时，当我单击按钮时它没有执行任何操作。

我正在使用这个插件将 javascript 放到我的页面上: 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>

代码确实嵌入到页眉中(通过查看页面源代码可见)，但按钮不起作用。

我最初认为这是 noConflict() 的问题，详见此处: TypeError: $ is not a function when calling jQuery function

我在编辑器(在插件内)中也有这个错误，但是当我导航到页面时它没有出现在控制台中:

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

我尝试删除脚本标签，但它只会将其作为文本放入标题中。

谢谢你的帮助

Answer 1

您正试图在 DOM 准备好之前将处理程序附加到元素。将代码包装在 ready 处理程序中可以解决此问题:

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 + '€');
    });
});

包裹在 JavaScript 中的代码是 jQuery 的 .ready 的简写。事件。