jquery 함수 입력 라디오 onchange

Question

자기가 작성한 쿼리 기능을 구현하려하고 있습니다. 함수에 대한 간단한 설명 : 라디오 버튼을 변경할 때 두 값을 다시 계산해야합니다. JSFiddle에서 작업 중입니다. (http://jsfiddle.net/VL465/34/)

하지만 지금은 실제 웹 페이지에서 구현하려고합니다. 하지만 실제로는 제대로 작동하지 않습니다. 디버깅을 시도했지만 보류 상태로 갈아 타지 않았습니다.

현재 콘솔에는 "기능로드 됨"메시지 만 표시됩니다. 라디오 버튼을 변경하면 인식 된 요일이 표시되지 않습니다. 난이 머리에

:

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

형태가 정확히 동일합니다

나 현재 HTML 파일을 명확히하자

<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 요소입니다.

custom-form-elements 스크립트는 라디오 버튼이 선택된 것처럼 보일 수 있지만 라디오 버튼에는 change 이벤트가 실행되지 않습니다.

이 문제를 얻으려면, 당신은 당신의 $(document).ready()에 다음과 같은 것을 추가해야합니다 :

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

이에 변경 이벤트가 발생합니다 스팬 마스크에 클릭 이벤트 처리기를 추가합니다 해당 라디오 버튼. HTML을 보면 this.nextSibling은 항상 범위 옆의 라디오 버튼을 참조합니다.