方法不会在发生更改事件时立即触发

Question

下面两个问题的代码。

当用户输入值 'coupon10' 时，它会删除 class 'disabled' 并且应该取消绑定阻止默认值的点击事件行为，但事实并非如此。
用户必须在字段中输入一个随机字符串，将其删除，然后输入 'coupon10' 以启用该按钮。所以 change 事件有效，但只有在输入不正确的字符串之后。我需要它第一次工作。

我可以补充一点，我使用的是 Ember 1.4（不是选择）

jQuery

  $(document).on('blur', 'input[name="coupon_code"]', function(){

    var form = $(this).closest('form');

    var couponBtn = form.find('input[name="apply_coupon"]');
    var couponCode = form.find('input[name="coupon_code"]');

    $(couponBtn).on('click', function(e){
        e.preventDefault();
        console.log('timmy2')
    });

    $(couponCode).change(function(){
      if($(couponCode).val() == 'coupon10') {    
          $(couponBtn).removeClass('disabled');
          $(couponBtn).unbind('click'); 
          console.log('winning');                
      } else if ($(couponCode).val() != 'coupon10') { 
          console.log('hello');
      }       
    });   

  });

HTML

<form name="ApplyCouponForm" method="post" action="/apply_coupon_check">
    <div class="form-row">

    </div>

    <input id="account_id" class="ember-view ember-text-field" type="hidden" name="account_id" value="11">

    <div class="form-row with-border">
      <div class="field w100">
        <label for="coupon_code">If your employer has introduced you to Social CareLine, enter below the coupon code </label>
        <input id="ember767" class="ember-view ember-text-field" type="text" name="coupon_code" required="required">
      </div>
 <input class="apply-coupon disabled button submit-button no-margin-top" type="submit" value="Apply Coupon" name="apply_coupon">   </div>
    <div class="clear"></div>

    <div class="form-row">
       </div></form>

CSS

.disabled {
  background: #dfdfdf!important;
  cursor: default!important;
  color: red;
}

.right-column .form-row {
  width: 518px; padding: 0px 0px; clear: both;
}

.submit-button {margin-top: 15px;}

.button.submit-button {
  padding: 8px 12px 8px 32px;
  background: #57d78d url("../images/submit-checkmark.png") no-repeat 10px center;
}

.right-column .main-submenu li.apply-coupon {
  background-image: url("../images/submenu-document.png");
}

Answer 1

您的问题

当用户输入值 'coupon10' 时，它会删除 class 'disabled' 并且应该取消绑定阻止默认行为的点击事件，但事实并非如此。

Cause - This was because your event of change on the input has been binded within blur of the same, which actually did not bind unless and until it got focus and then blurred i.e. lost focus. However I am not sure as to why it should unbind the click event which prevents the default behavior because, if you have disabled it with adding attribute disabled to the button, it will not be clickable until you enable it. Have added the same in DEMO given below. Also e.preventDefault() for a button inside its click event will do the same, So IMHO no need to unbind click event.

用户必须在字段中输入一个随机字符串，将其删除，然后输入 'coupon10' 启用按钮。所以 change 事件有效，但是仅在输入不正确的字符串后。我需要它先工作时间。

Cause - As I said above, the behavior is because of the improper binding of elements event.

解决方案

disabled属性为input element

<input class="apply-coupon disabled button submit-button no-margin-top" 
type="submit" value="Apply Coupon" disabled name="apply_coupon"/>
                                   ^^^^^This here

将 events 移出 blur event。

$('input[name="coupon_code"]').on('input', function() {
    var ctrl=$(this);//$(this) refers to current clicked button
    var couponBtn=ctrl.closest('form').find('input[name="apply_coupon"]');
    //get its respective couponBtn

    if (ctrl.val() == 'coupon10') {
        $(couponBtn).addClass('disabled').attr('disabled',false);
        //remove button disabled attribute
        $(couponBtn).removeClass('disabled');
        $(couponBtn).unbind('click');//Not sure whether you need this now
        console.log('winning');
    } else if (ctrl.val() != 'coupon10') {
        console.log('hello');
        $(couponBtn).addClass('disabled').attr('disabled',true);
        //add button disabled attribute
    }
})

$('input[name="apply_coupon"]').on('click', function() {
    e.preventDefault();
    console.log('timmy2')
})

`FIDDLE DEMO`

更新

看了你的第一条评论，我觉得这是典型的event delegation问题，其中，elements到DOM会在DOM ready之后添加，即动态，但是events 不会附加到它们。因此，您需要将 events 附加到 DOM ready 期间存在的 element 以及将附加这些 elements 的位置，或者直接附加到 document 作为你用你的 blur event 做了。在这种情况下采用以下代码。

$(document).on('input','input[name="coupon_code"]', function() {
    var ctrl=$(this);//$(this) refers to current clicked button
    var couponBtn=ctrl.closest('form').find('input[name="apply_coupon"]');
    //get its respective couponBtn

    if (ctrl.val() == 'coupon10') {
        $(couponBtn).addClass('disabled').attr('disabled',false);
        //remove button disabled attribute
        $(couponBtn).removeClass('disabled');
        $(couponBtn).unbind('click');//Not sure whether you need this now
        console.log('winning');
    } else if (ctrl.val() != 'coupon10') {
        console.log('hello');
        $(couponBtn).addClass('disabled').attr('disabled',true);
        //add button disabled attribute
    }
})

$(document).on('click','input[name="apply_coupon"]', function() {
    e.preventDefault();
    console.log('timmy2')
})

方法不会在发生更改事件时立即触发

Methods not firing immediately on change event

jquery

onchange

ember.js

jQuery

HTML

CSS

`FIDDLE DEMO`