javascript - 无法在 .on() 方法中触发两个事件

Question

这是我当前的工作代码。有两个事件，一个是click()，另一个是load()。

<script>
    $(".city,.state,.zip,.layout-slider,.jslider-pointer").click(function(){
        var csrf = "{{ csrf_token() }}";
        var cities = [];
        var states = [];
        var zips = [];
        var price = $("#Slider1").val();
        var area = $("#Slider2").val();
        $(".city:checked").each(function(){
            cities.push($(this).val());
            $("#filter-item-city").html('<b>City: </b>'+cities)
        });
        $(".state:checked").each(function(){
            states.push($(this).val());
            $("#filter-item-state").html('<b>State: </b>'+states)
        });
        $(".zip:checked").each(function(){
            zips.push($(this).val());
            $("#filter-item-zip").html('<b>ZIP Code: </b>'+zips)
        });

        if(cities.length == 0){
            $("#filter-item-city").html('')
        }
        if(states.length == 0){
            $("#filter-item-state").html('')
        }
        if(zips.length == 0){
            $("#filter-item-zip").html('')
        }

        $.ajax({
            url: 'filter',
            data: {_token:csrf,cities:cities,states:states,zips:zips,price:price,area:area},
            type: 'get'
        }).done(function(e){
            $("#result").html(e);
        });
    })


    $(window).load(function(){
        var csrf = "{{ csrf_token() }}";
        var cities = [];
        var states = [];
        var zips = [];
        var price = $("#Slider1").val();
        var area = $("#Slider2").val();
        $(".city:checked").each(function(){
            cities.push($(this).val());
            $("#filter-item-city").html('<b>City: </b>'+cities)
        });
        $(".state:checked").each(function(){
            states.push($(this).val());
            $("#filter-item-state").html('<b>State: </b>'+states)
        });
        $(".zip:checked").each(function(){
            zips.push($(this).val());
            $("#filter-item-zip").html('<b>ZIP Code: </b>'+zips)
        });

        if(cities.length == 0){
            $("#filter-item-city").html('')
        }
        if(states.length == 0){
            $("#filter-item-state").html('')
        }
        if(zips.length == 0){
            $("#filter-item-zip").html('')
        }

        $.ajax({
            url: 'filter',
            data: {_token:csrf,cities:cities,states:states,zips:zips,price:price,area:area},
            type: 'get'
        }).done(function(e){
            $("#result").html(e);
        });
    })
</script>

两个事件中的代码是相同的。因此，我尝试使用 on() 方法。

<script>
    $(".city,.state,.zip,.layout-slider,.jslider-pointer").on("click load", function(){
        //pasted duplicate codes here
    })
</script>

使用此 jQuery 后不起作用。我想避免重复的代码并使脚本更干净、简单。请帮助我使它更干净。

Answer 1

您的一个事件已绑定(bind)在窗口上。当您使用 .on 时，您会忽略窗口，并且 HTML 元素没有 load 监听器。如果您有 2 个元素要绑定(bind)事件，您仍然应该使用 .on 事件，因为 .click 和 .load 是 的包装器。上。

为了实用性，只需声明一个命名函数并将其用作处理程序:

function handler(){
    /* Your code */
}

$(".city,.state,.zip,.layout-slider,.jslider-pointer").on( 'click', handler );
$( window ).on( 'load', handler );