javascript - jQuery 'change' 方法(用于 HTML 属性修改)仅工作一次

Question

我有这对函数影响两个输入和一个选择。这些是排他性的，因此当输入被填充时，必须修改 select 以选择选项 3，并且当选择除 3 之外的任何选项时，两个输入都必须为空:

$('#ar_filter').on('change', '#ar_fromDate, #ar_toDate', function() {
        if ($('#ar_fromDate, #ar_toDate').val!=""){
           $('.lastDays').attr('readonly','readonly').find('option[value=3]').attr('selected', true);
        }
    });   

$('#ar_filter').on('change', '#lastDays', 'select', function() {
        if ($('.lastDays').val()!=3){
            $('#ar_fromDate, #ar_toDate').val("");
        }
    });

这有效，但只是第一次。当我在输入上写入一些值时，它会将选择正确重置为值 3，但是当我更改手动选择的选项时，在它重置并将输入留空后，它不会再重置选择，即使在任何这些输入上写入时也是如此。

<强> JSFIDDLE EXAMPLE (尝试通过填充输入进行 2 个选择重置:它只会进行第一个)

Answer 1

根据您的 JSFiddle，我相信您的 .on() 的第二个实现是不正确的。第三个可选参数可以作为数据传递给处理函数，如 reference documentation 中所示。

尝试改变:

$('#ar_filter').on('change', '#lastDays', 'select', function() {

对此:

$('#ar_filter').on('change', '#lastDays', function() {

根据上面的comment，我相信您的选择器是错误的。 #lastDays 是 id 元素的 <select>，这是您想要绑定(bind) change 事件的位置。不需要额外的select。

Updated Fiddle

注意:

更新后的 fiddle 包括 @tymeJV 在他的答案中描述的 .val() 修复。

编辑:

除了上述的 .on() 选择器修复之外，您还需要在 .val() 语句中分解两个选择器。这是因为每次发生更改事件时只会验证第一个输入。这直接来自 .val() 的 jQuery 文档:

Get the current value of the first element in the set of matched elements.

不会获取或验证第二个值。

更改此:

$('#ar_fromDate, #ar_toDate').val() != ""

对此:

$('#ar_fromDate').val() != "" || $('#ar_toDate').val() != ""

这应该可以解决问题。我在下面添加了更新的 fiddle 。我保留了原来的 fiddle ，以展示解决此问题的步骤进展，以方便 future 的访问者。

Complete Fiddle