Question

我有以下脚本

$(function(){
    $('.input1_class, .input2_class, <many other input classes go here>').bind('change', function(){
        $.ajax({
            url: "<%= update_fields_projects_url %>",
            data: {
                input1: $('.input1_class').val(),
                input2: $('.input2_class').val(),
                <other inputs go here>
            }
        });
    });
});

这工作正常，因此如果修改了任何输入，则执行正确的操作并且ajax更新也可以正常运行。

现在我想通过点击以下按钮来触发相同的ajax请求

<input type=button id=update_button_id value="Update Fields" class=update_button_class>

我打算通过更改标题来复制上一个函数，如下所示，我认为这样可以正常工作

$(function(){
    $('.update_button_class').bind('click', function(){
        $.ajax({
            url: "<%= update_fields_projects_url %>",
            data: {
                input1: $('.input1_class').val(),
                input2: $('.input2_class').val(),
                <other inputs go here>
            }
        });
    });
});

但我认为这不是一个好的解决方案，因为任何后续更改都必须同时在两个函数中完成。

我想知道是否有更好的方法只编写一次这个函数并从输入“更改”或按钮“点击”触发它

UPDATE1：

我改为

function updateFields(){
    $.ajax({
        url: "<%= update_fields_projects_url %>",
        data: {
            input1: $('.input1_class').val(),
            input2: $('.input2_class').val(),
            <other inputs go here>
        }
    });
}

$('.input1_class, .input2_class, <many other input classes go here>').change(updateFields);

<input type=button id=apply_button_id value="Apply Updates" class=apply_button_class onClick="updateFields();">

Update2：

我也试过

$('.input1_class, .input2_class, ...').bind('change',updateFields);

那也不起作用

Update3：

以下是对我有用的

function updateFields(){
    $.ajax({
        url: "<%= update_fields_projects_url %>",
        data: {
            input1: $('.input1_class').val(),
            input2: $('.input2_class').val(),
            <other inputs go here>
        }
    });
}

$(function(){
    $('.input1_class, .input2_class, ...').bind('change',updateFields);
});

<input type=button id=apply_button_id value="Apply Updates" class=apply_button_class onClick="updateFields();">

Answer 1

只需为该函数命名：

function func(){

}

$("...").change(func);

<a href="" onclick="func()">Blah</a>

甚至：

<a id="link">Blah</a>

然后：

$("...").change(func);

$("#link").click(func);

如何将相同的javascript函数绑定到输入更改和按钮单击

1 个答案: