頁面上的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：$不是調用jQuery函數時的函數

我在編輯器中（插件內部）也存在此錯誤，但是當我導航至頁面時，它不會出現在控制台中：

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事件的簡寫。

Answer 2

加載代碼后，jQuery尚未准備就緒。 因此，您的代碼將被完全忽略。

將您的代碼放入其中：

jQuery(function() {
/* your code here */
)};