Question

我有一个带有两个无线电选项和一个提交按钮的表单。根据按下提交按钮时选择的单选按钮，我想要调用不同的计算功能。

     <input type="radio" name="frm" id="airradio1"  onclick="setairform1()">&nbsp; Enter individual flights(more accurate) <br>
    <input type="radio" name="frm" id="airradio2" onclick="setairform2()">&nbsp; Enter numbers of flight(faster)<br>

    <div><button type="button" id="aircalc" >calculate</button></div>

我的计算功能运作良好。但是，当我选择第二个单选按钮然后单击calc按钮时，它将显示我使用第一种方法进行的最后一次计算的结果。

这是我的Javascript / jQuery，我做错了什么？

        $("#airradio2").click(function(){
                $("#aircalc").click(myairFunction2);


            });


        $("#airradio1").click(function(){
            $("#aircalc").click(function(){
                $("#airanswer").val("");
                var dept = $("#dept").val();
                var dest = $("#dest").val();
                $.post('airtravel.php',{dept: dept, dest: dest}, function(data){
                    var response = jQuery.parseJSON(data);
                    var a =response.co2;
                    var mile = (response.miles).toFixed(4);
                    var numpass = $("#numpass").val();
                    var flightclass = $("#flightclass").val();
                    var trip = $("input[name='trip']:checked").val();
                    var total = (a * trip * flightclass * numpass).toFixed(4);

                    var sum = "<div>Trip from " + dept + " to " + dest + ", you traveled " + mile + "miles</div>";
                    $("#airanswer").text(total);
                    $("#results").append(sum);

                });


            });

        });

Answer 1

您将两个.click()事件绑定到$('#aircalc')。要防止双重绑定，请考虑使用.on()进行绑定，以便每次使用.off()时都可以删除以前的处理程序。

$("#airradio2").on('click', function() {
    $("#aircalc").off('click').on('click', myairFunction2);
});


$("#airradio1").on('click', function() {
    $("#aircalc").off('click').on('click', function() {
        $("#airanswer").val("");
        var dept = $("#dept").val();
        var dest = $("#dest").val();
        $.post('airtravel.php',{dept: dept, dest: dest}, function(data) {
            var response = jQuery.parseJSON(data);
            var a =response.co2;
            var mile = (response.miles).toFixed(4);
            var numpass = $("#numpass").val();
            var flightclass = $("#flightclass").val();
            var trip = $("input[name='trip']:checked").val();
            var total = (a * trip * flightclass * numpass).toFixed(4);
            var sum = "<div>Trip from " + dept + " to " 
                + dest + ", you traveled " + mile + "miles</div>";
            $("#airanswer").text(total);
            $("#results").append(sum);
        });
    });
});

另一种更好的方法是识别选择哪个单选按钮并调用相应的函数（如@GriffeyDog所指出的）：

// Save off objects to prevent DOM re-traversal
var $dept = $('#dept'),
    $dest = $('#dest');

$('#aircalc').on('click', function () {
    if($('#airradio1').is(':checked')) {
        $("#airanswer").val("");
        $.post('airtravel.php',{dept: $dept.val(), dest: $dest.val()}, function(data) {
            var response = jQuery.parseJSON(data);
            var a =response.co2;
            var mile = (response.miles).toFixed(4);
            var numpass = $("#numpass").val();
            var flightclass = $("#flightclass").val();
            var trip = $("input[name='trip']:checked").val();
            var total = (a * trip * flightclass * numpass).toFixed(4);
            var sum = "<div>Trip from " + dept + " to " 
            + dest + ", you traveled " + mile + "miles</div>";
            $("#airanswer").text(total);
            $("#results").append(sum);
        });
    } else {
        myairFunction2();
    }
});

为什么两个jquery函数之间存在冲突

1 个答案: