Question

我对AJAX请求不熟悉，并在修改表单输入字段时触发这些请求。我已经设法通过日期输入字段使这个工作得很好，但刚刚在页面中添加了第二个表单，该表单还有一个日期输入字段，现在脚本在两个字段都被修改时触发。我需要禁用它，以便它不会在第二个输入字段上触发。

这是第一个输入字段：

        <td id="57944"><input type="text" id="985124" class="form-control datepicker" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>

在修改日期字段时触发此脚本：

$(document).ready(function() {
  $(".form-control.datepicker").change(function(){

我刚刚添加了第二个输入字段：

        <td><input type="text" class="form-control datepicker" name="dateReceived" id="dateSigned" data-date-format="dd/mm/yyyy" placeholder="Date Signed"></td>

也会触发相同的脚本。我可以看到两者都有：

class="form-control datepicker"

这可能是脚本为两者解雇的原因，但我不确定如何更改第二个输入以便它不会触发脚本（或更改$(".form-control.datepicker").change(function(){部分脚本，以便它只在修改第一个输入时触发。）

Answer 1

您可以查看eq选择器.form-control.datepicker:eq(0)

只会选择第一个元素。

Answer 2

如果您对同一个班级使用事件，则会触发两个事件，您可以使用

$（＆＃34; .FORM-control.datepicker：当量（0）＆＃34）。变化（函数（）{}）;

或

$（＆＃34; .FORM-control.datepicker：第一子＆＃34）。变化（函数（）{}）;

Answer 3

我建议在要触发事件的日期字段中添加一个类。然后，在连接事件时使您的类选择器更具体。这将使你的代码比使用：eq（）更具可扩展性，因为当你去添加更多输入时，你不必弄清楚哪个索引是哪个控件。

<td id="57944"><input type="text" id="985124" class="form-control datepicker fire-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>

$(document).ready(function() {
    $(".form-control.datepicker.fire-event").change(function(event){
        // handle event
    });
});

相反，如果您希望将特定类添加到您不希望触发更改事件的项目，则可以使用.not()选择器功能：

<td id="57944"><input type="text" id="985124" class="form-control datepicker no-change-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>

$(document).ready(function() {
    $(".form-control.datepicker").not(".no-change-event").change(function(event){
        // handle event
    });
});

Answer 4

您也可以尝试使用名称选择器

$("input[name='dateShipped']").
 change(function(){});

AJAX脚本触发器在两个单独的输入字段上触发

4 个答案: