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

以上是上面工作的erb

           <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>

我提到过很多问题，看起来我的coffeescript还可以。但改变的代码并没有被触发。为什么呢？

Answer 1

我没有看到您的代码明显错误。可能的问题可能是：

该coffeescript文件未在页面上加载。尝试在就绪功能的顶部发出警报，以确保。
运行coffeescript后，HTML将被添加到DOM中。也许它是由Ajax加载的还是动态构建的？

尝试在javascript控制台中键入$('input[type=radio][name="child[payment_plan]"]')并检查它是否确实找到了一些匹配的元素。

如果可行，请尝试在控制台中添加事件：

$('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',  ->

在更改时无法使用无线电组按钮

2 个答案: