无法在 .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

您的一项活动绑定在 window 上。当您使用 .on 时，您省略了 window 并且 HTML 元素没有 load 侦听器。如果你有 2 个元素绑定事件，你仍然应该使用 .on 事件，因为 .click 和 .load 是 .on.

的包装器

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

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

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

Answer 2

我认为你需要做类似的事情

<script>
    function handler() {...}

    $(document).on('ready', function(){
        $(".city,.state,.zip,.layout-slider,.jslider-pointer").on('click', handler);
    });
    $(window).on('load', handler);
</script>

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

Cannot trigger two events in .on() method

javascript

jquery

jquery-events