javascript - JavaScriptはJS Fiddleでは機能しますが、Chrome / IEでは機能しません

原文 javascript jquery html css jsfiddle

私のコードがブラウザーで機能しない理由を理解できませんが、フィドルで機能します。 http://jsfiddle.net/4tafnwcj/2/

プランをクリックすると、合計が価格を出力するはずですが、ブラウザでは発生しません。開発ツールをチェックしてキャッシュをクリアしましたが、役に立ちませんでした。また、必要なjquery、jsファイルもすべて含めましたが、何か他に問題があるようです。理由はわかりません。何が問題なのか、助けて説明してください。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="<?=SITE_SCRIPT?>jquery.validate.min.js"></script> 
    <script type="text/javascript" src="<?=SITE_SCRIPT?>jquery.form.js"></script> 
    <script type="text/javascript" src="<?=SITE_SCRIPT?>jquery.nivo.slider.pack.js"></script> 
    <script type="text/javascript" src="<?=SITE_SCRIPT?>bootstrap.min.js"></script>            
    <script type="text/javascript" src="<?=SITE_SCRIPT?>icheck.min.js"></script> 

コード:

<div class="checkout">
                        <span id="checkout-title">Checkout</span>
                        <div class="plan-wrapper">
                        <label id="silver-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="699" onclick="calculate(this);"/>Cyber Security Silver Plan</label>
                        <label id="silver-plan-price">$699</label>
                        <label id="gold-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="999" onclick="calculate(this);"/>Cyber Security Gold Plan</label>
                        <label id="gold-plan-price">$999</label>
                        </div>
                        <div class="logo-wrapper">
                            <span id="personalized-logo">Personalized Logo</span>
                            <span id="logo-price">$49.99</span>
                        </div>
                        <div class="tax-wrapper">
                            <div class="wrapper-a">
                            <span id="tax">Tax + Processing</span>
                            <span id="tax-price">$0.00</span>
                            </div>
                        </div>
                        <div class="total-wrapper">
                            <div class="wrapper-b">
                            <span id="total">Total</span>
                            <output type="number" name="price" id="output"></output>
                            </div>
                        </div>
                        <div class="controls submit-btn">
                            <input  type="submit" value="Checkout" />
                            <input  type="reset" value="Clear" />
                        </div>
                        <div class="controls back-btn">
                            <input  class="back-button" type="button" value="Back" />
                        </div>
                    </div><!--/.checkout -->

.js

<script>
  $(document).ready(function(){
    $(document).on("click", ".btn-checkbox-plan", function(e){
     //alert();
    if($(this).is(':checked')){

        $("#output").html($(this).val());
     }

   });  

});
</script>

答え

onclick = "calculate(this);"を削除しました必要ないので、計算するものがありません。

http://jsfiddle.net/3tdwak2h/4/フィドルではコードが実行されますが、ブラウザでは実行されません。そして、Chromeコンソールログで唯一表示されるエラーは、リソースのロードに失敗しました:net::ERR_CACHE_MISS

コード

<div class="checkout">
                        <span id="checkout-title">Checkout</span>
                        <div class="plan-wrapper">
                        <label id="silver-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="699" /> Silver Plan</label>
                        <label id="silver-plan-price">$699</label>
                        <label id="gold-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="999" /> Gold Plan</label>
                        <label id="gold-plan-price">$999</label>
                        </div>
                        <div class="logo-wrapper">
                            <span id="personalized-logo">Personalized Logo</span>
                            <span id="logo-price">$49.99</span>
                        </div>
                        <div class="tax-wrapper">
                            <div class="wrapper-a">
                            <span id="tax">Tax + Processing</span>
                            <span id="tax-price">$0.00</span>
                            </div>
                        </div>
                        <div class="total-wrapper">
                            <div class="wrapper-b">
                            <span id="total">Total</span>
                            <output type="number" name="price" id="output"></output>
                            </div>
                        </div>
                        <div class="controls submit-btn">
                            <input  type="submit" value="Checkout" />
                            <input  type="reset" value="Clear" />
                        </div>
                        <div class="controls back-btn">
                            <input  class="back-button" type="button" value="Back" />
                        </div>
                    </div>

.js

   $(document).ready(function(){
     //alert();
   $(document).on("click", ".btn-checkbox-plan", function(e){
     if($(".btn-checkbox-plan").is(':checked')){

    $("#output").html($(this).val());
}

   });  

 });

関連記事