На смену не работает на радио-кнопок группы

Question

Это кофе сценарий я написал что-то сделать по изменению в группе кнопок

ready = -> 
    $('input[type=radio][name="child[payment_plan]"]').on 'change', -> 
    alert("asd") 
    if $(@).val == "normal" 
     alert("asd1") 
     $("#child_payment_plan_amount").prop('disabled', true) 
     $("#child_payment_plan_amount").prop('readonly', true) 
    else 
     alert("asd2") 
     $("#child_payment_plan_amount").prop('disabled', false) 
     $("#child_payment_plan_amount").prop('readonly', false) 

$(document).ready ready 
$(document).on "page:load", ready 

Вот Еврорадио, на которой выше работает

  <div class="row"><!-- row 4 --> 
       <div class="col-8 nopadding"> 
       <div class="controls"> 
        <p>Payment Plan</p> 
        <%- ["normal", "weekly", "bi_weekly", "monthly"].each do |x| %> 
        <%= "#{x.camelize} plan" %> 
        <%= f.radio_button :payment_plan, x, checked: (f.object.child_specific_fee ? (x == f.object.child_specific_fee.payment_plan ? true : false): x == "normal" ? true : false), class: "form-control child_payment_plan" %> 
        <%- end %> 
       </div> 
       </div><!-- /col-4 --> 
      </div><!-- /row 4 --> 

      <div class="row"><!-- row 4 --> 
       <div class="col-8 nopadding"> 
       <div class="controls"> 
        <p>Payment Plan Amount</p> 
        <%= f.number_field :payment_plan_amount, value: f.object.child_specific_fee ? f.object.child_specific_fee.amount : nil, step: 0.01, class: "form-control", readonly: f.object.child_specific_fee ? false : true, disabled: f.object.child_specific_fee ? false : true %> 
       </div> 
       </div><!-- /col-4 --> 
      </div><!-- /row 4 --> 

результирующий HTML является:

  <div class="row"><!-- row 4 --> 
       <div class="col-8 nopadding"> 
       <div class="controls"> 
        <p>Payment Plan</p> 
        Normal plan 
        <div class="iradio_flat-blue checked" style="position: relative;"><input type="radio" id="child_payment_plan_normal" name="child[payment_plan]" checked="checked" value="normal" class="form-control child_payment_plan"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> 
        Weekly plan 
        <div class="iradio_flat-blue" style="position: relative;"><input type="radio" id="child_payment_plan_weekly" name="child[payment_plan]" value="weekly" class="form-control child_payment_plan"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> 
        BiWeekly plan 
        <div class="iradio_flat-blue" style="position: relative;"><input type="radio" id="child_payment_plan_bi_weekly" name="child[payment_plan]" value="bi_weekly" class="form-control child_payment_plan"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> 
        Monthly plan 
        <div class="iradio_flat-blue" style="position: relative;"><input type="radio" id="child_payment_plan_monthly" name="child[payment_plan]" value="monthly" class="form-control child_payment_plan"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins></div> 
       </div> 
       </div><!-- /col-4 --> 
      </div> 

      <div class="row"><!-- row 4 --> 
       <div class="col-8 nopadding"> 
       <div class="controls"> 
        <p>Payment Plan Amount</p> 
        <input type="number" id="child_payment_plan_amount" name="child[payment_plan_amount]" disabled="disabled" readonly="readonly" class="form-control" step="0.01"> 
       </div> 
       </div><!-- /col-4 --> 
      </div> 

Я уже говорил много вопросов, это выглядит, как мой coffeescrip t в порядке. Но код изменения не срабатывает. Зачем?

Answer 1

Я не вижу ничего плохого в вашем коде. Возможные проблемы могут быть следующими:

1. Этот файл coffeescript не загружается на страницу. Попробуйте поставить предупреждение в верхней части готовой функции, чтобы быть уверенным.

2. HTML добавляется в DOM после запуска coffeescript. Может быть, он загружен Ajax или построен динамически?

Попробуйте ввести $('input[type=radio][name="child[payment_plan]"]') в консоль JavaScript и убедитесь, что он действительно найти некоторые соответствующие элементы.

Если это работает, попробуйте добавить событие в консоли тоже:

$('input[type=radio][name="child[payment_plan]"]').on('change', function(){alert("asd3")}); 

Наконец, если ваш браузер поддерживает его, я бы рекомендовал использовать console.log() вместо alert(). Не только alert() раздражает, но также может инициировать дополнительные события (например, blur), которые могут смутить вещи.

Answer 2

$('input[type=radio][name="child[payment_plan]"]').on 'change', -> 

вместо попробовать это: -

$('input:radio[name="child[payment_plan]"]').on 'change', ->