的 `FIDDLE DEMO`

Question

以下两个问题的代码。

当用户输入值＆＃39; coupon10＆＃39;它删除了班级＆＃39;禁用＆＃39;并且应该取消绑定阻止默认行为的点击事件，但它没有。<
li>。
用户必须在字段中输入随机字符串，将其删除，然后输入＆＃39; coupon10＆＃39;启用按钮。因此，更改事件有效，但仅在输入错误的字符串后才能生效。我需要它第一次工作。

我可以补充说我使用的是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'时，它会删除“禁用”类，并且应取消绑定阻止默认行为的click事件，但事实并非如此。

原因 - 这是因为change上input的{{1}}事件已绑定在同一blur内，实际上并非bind }} 除非并且直到它得到focus然后变得模糊，即lost focus。但是我不确定为什么 should unbind the click event which prevents the default behavior ，因为如果你disabled向disabled添加属性button，它将会在启用它之前不可单击。在下面给出的 DEMO 中添加了相同内容。此e.preventDefault()内button click event也unbind也会这样做，因此恕我直言，无需click event event。

用户必须在字段中输入随机字符串，然后将其删除输入'coupon10'以启用按钮。所以改变事件有效，但是只有在输入错误的字符串后我需要它先工作时间。

原因 - 正如我上面所说，行为是因为元素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') })。

event delegation

<强>

的 `FIDDLE DEMO`

<强>更新

在看完第一条评论后，我觉得这是典型的elements问题，其中DOM DOM ready将在events之后添加，即动态，但{ {1}}不会附加到他们身上。因此，您需要将events附加到element期间出现的DOM ready以及这些elements将被追加的位置，或直接附加到document as你使用了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') })

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

的jQuery

HTML

CSS

1 个答案:

的 `FIDDLE DEMO`

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

的jQuery

HTML

CSS

1 个答案:

的 FIDDLE DEMO

的 `FIDDLE DEMO`