带有'keyup'和'change'参数的 jQuery on() 方法在移动设备上不起作用

Question

我试图禁用一个提交按钮，以检查是否所有的输入字段填写提交之前。下面的代码在桌面上运行良好，但在移动设备上不能运行。我错过什么了吗?

jQuery(function($) {
$('button.wof-btn-submit').attr('disabled', true);
$('[data-wof-field~="primary_email"]').on('keyup change drop paste', function(event) { 

validateInputs();
});
​
$('[data-wof-field~="text_2"]').on('keyup change drop paste', function(event) {
validateInputs();
});
​
$('[data-wof-field~="number_1"]').on('keyup change drop paste', function(event) {
validateInputs();
});
​
$('[data-wof-field~="text_1"]').on('keyup change drop paste', function(event) {
validateInputs();
});
​
function validateInputs(){
var disableButton = false;
​
var val1 = $('[data-wof-field~="primary_email"]').val();
var val2 = $('[data-wof-field~="text_2"]').val();
var val3 = $('[data-wof-field~="number_1"]').val();
var val4 = $('[data-wof-field~="text_1"]').val();
​
if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
disableButton = true;
​
$('button.wof-btn-submit').attr('disabled', disableButton);
}
});

链接

提前感谢，

Answer 1

jQuery(function($) {
$('button.wof-btn-submit').attr('disabled', true);
$('[data-wof-field~="primary_email"]').on('keyup change drop paste', function(event) {
validateInputs();
});
$('[data-wof-field~="text_2"]').on('keyup change drop paste', function(event) {
validateInputs();
});
$('[data-wof-field~="number_1"]').on('keyup change drop paste', function(event) {
validateInputs();
});
$('[data-wof-field~="text_1"]').on('keyup change drop paste', function(event) {
validateInputs();
});
function validateInputs() {
var disableButton = false;
var val1 = $('[data-wof-field~="primary_email"]').val();
var val2 = $('[data-wof-field~="text_2"]').val();
var val3 = $('[data-wof-field~="number_1"]').val();
var val4 = $('[data-wof-field~="text_1"]').val();
if (val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0) {
disableButton = true;
$('button.wof-btn-submit').attr('disabled', 'disabled')
}
if (!disableButton) {
$('button.wof-btn-submit').removeAttr('disabled');
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wof-form-wrapper">
<div class="wof-error wof-fgcolor" style="color:#dd0000;border-color:#dd0000;display: none;"></div>
<div class="wof-form-fields">
<div>
<input type="email" placeholder="Your email" data-wof-field="primary_email" class="wof-input" name="wof-email">
</div>
<div>
<input type="text" placeholder="Phone Number" data-wof-field="text_2" class="wof-input">
</div>
<div>
<input type="number" placeholder="Transaction Number" data-wof-field="number_1" class="wof-input">
</div>
<div>
<input type="text" placeholder="Full Name" data-wof-field="text_1" class="wof-input">
</div>
</div>
<button class="wof-btn-submit wof-color-2" type="submit" disabled="disabled">
<span>Try your luck</span>
<div class="wof-loader" style="display: none;">
<div class="b1"></div>
<div class="b2"></div>
<div></div>
</div>
</button>
<div class="wof-response"></div>
</div>