Question

我有一个货币计算器，需要按钮才能转换为货币。我想做它以便在输入任何内容时转换（运行表单）。目前，我处理按钮单击的jQuery看起来像这样（这是两个点击处理程序之一）：

        $('#convertFromButton').click(function() {
            $("#currencySelectValue2").val($("#currencySelect").val());
            $("#btcValueForm").val($("#btcValue").val());
            $.post("php/convertFromForm.php", $("#convertFromForm").serialize(), function(data){ 
                $('#fromCurrencyValue').removeClass('intra-field-label');
                $('#fromCurrencyValue').val(data);
            });
        });

第一个文字字段为#fromCurrencyValue，第二个字段为#btcValue。

如何以我描述的方式让它工作？

Answer 1

我愿意

$('#formCurrencyValue, #btcValue').keyup(function() {$('#convertFromButton').click(); });

然后，如果您更改任何提交逻辑，它将针对所有事件进行更改

我把它切换到了keyup。这应该记录每个按下的键。

Answer 2

我将与其他人区别开来，并说明确地从其他功能/事件中调用事件处理程序是应该避免的肮脏做法。通过执行以下操作可以更清楚：

    var xhr;
    function refresh() {
        $("#currencySelectValue2").val($("#currencySelect").val());
        $("#btcValueForm").val($("#btcValue").val());
        if(xhr) xhr.abort();
        xhr = $.post("php/convertFromForm.php", $("#convertFromForm").serialize(), function(data){ 
            $('#fromCurrencyValue').removeClass('intra-field-label').val(data);
        });
    }

    //Bind as many things as you want to your new function.  Also easily unit tested!  Yay!
    $('#convertFromButton').click(refresh);
    $('#fromCurrencyValue, #btcValue').keyup(refresh)

Answer 3

// if you keyup in fromCurrencyValue or btcValue it will trigger the click on convertFromButton
$("#fromCurrencyValue, #btcValue").bind("keyup", function() {
  $('#convertFromButton').click();
});

但请记住$ .post默认为异步，因此如果稍后提出的一个请求在另一个之前回答，则会产生不必要的行为。

修改

发布值时请使用：

var xhr; // make it global /* Your code goes here */ if (xhr) xhr.abort(); // if there's a xhr request abort it xhr = $.post(...) /* The rest of your code */

所以你不会得到不想要的行为：）

在每个按键上提交表单

3 个答案: