jquery函数输入收音机onchange

Question

我试图实现一个自写查询功能。关于该功能的简要说明：更改单选按钮时应重新计算两个值。它在JSFiddle中工作。 （http://jsfiddle.net/VL465/34/）

但是现在我试图在真正的网页中实现它。但实际上我无法得到它的工作。我试图调试它，但没有磨平。

当前控制台只显示“功能加载”消息。更改单选按钮时不显示天数。

让我澄清一下当前的HTML文件：

的头，我有：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
<script type="text/javascript" src="/js/functions.js"></script> 

的形式是完全一样的：

<form action="/b/" method="POST" id="choseLessor"> 
    <fieldset> 
    <input type="hidden" name="userLocale" value="en"> 
    <ul> 
     <li><span class="rate"> € 21,29</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="30" data-price="21.29"><b>30 days </b></li> 
     <li><span class="rate"> € 23,65</span> <span class="note">starting at </span><span class="radio" style="background-position: 0px -50px;"></span><input type="radio" class="styled" name="days" value="60" data-price="23.65" checked=""><b>60 days </b></li> 
     <li><span class="rate"> € 26,02</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="90" data-price="26.02"><b>90 days </b></li> 
     <li><span class="rate"> € 27,20</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="120" data-price="27.2"><b>120 days </b></li> 
    </ul> 
    <div class="priceCalculation"> 
     <div class="list"> 
      <span class="type">List Price:</span> 
      <span class="retailPriceActual"> 
       <div class="strikethrough">€ 49,93</div> 
      </span> 
     </div> 
     <div class="savings"> 
      <span class="type">Your Savings:</span> 
      <span class="bookSavings" id="CalculateSavings">€ 26,28</span> 
     </div> 

     <div class="total"> 
      <span class="type bigger">Your Price:</span> 
      <span class="totalPrice" id="CalculatePrice">€ 23,65</span> 
     </div> 

    </div> 
    <input type="submit" value="Cho" class="btn"> 
    </fieldset> 
</form> 

而且functions.js的内容

$(document).ready(function() { 
    console.log ('Function loaded'); 
    $("input[name=days]:radio").change(function() { 
     console.log ('Days recognized'); 
     // get values 
     var savingPrice = 0; 
     var msrp = $('input[name="msrp"]').val(); 
     var periodPrice = $('input[name="days"]:checked').data('price'); 
     var userLocale = $('input[name="userLocale"]').val(); 

     console.log ('UserLocale' + userLocale); 

     // calculate bac 
      savingPrice = (msrp-periodPrice).toFixed(2); 

     if(userLocale === 'nl') 
     { 
      savingPrice = savingPrice.replace(/\./g, ','); 
      periodPrice = periodPrice.replace(/\./g, ','); 
     } 

     $('#CalculateSavings').text('€ ' + savingPrice); 
     $('#CalculatePrice').text('€ ' + periodPrice); 
    }); 
}); 

控制台显示：

Function loaded 

而不是更多，甚至不是当单选按钮被更改时。

我到底做错了什么？

Answer 1

我认为，问题不在于你的代码本身，而是它如何与包含自定义外形elements.js代码交互

看来你的单选按钮隐藏在背后的风格跨度元素，改善表单的外观和感觉。但是，从DOM的角度来看，用户点击的实际元素不是单选按钮，而是span元素。

自定义表单元素脚本在幕后做了一些时髦的事情，使其看起来像单选按钮已被选中，但从未在单选按钮上触发change事件。

为了解决这个问题，你需要添加类似下面你$(document).ready()：

$("span.radio").click(function() { 
    $(this.nextSibling).trigger('change'); 
}); 

这将click事件处理程序添加到跨度口罩，这将触发对变化事件他们相应的单选按钮。查看您的HTML，this.nextSibling始终引用跨度旁边的单选按钮。