Jquery事件执行两次

Jquery event executing twice

本文关键字：两次事件执行 Jquery 更新时间：2023-09-26

我真的在为小时的代码和平而奋斗:

    $('#property_image_uploader').on('submit',function(e) {
         var formData = new FormData(this);
         $.ajax({
             type:'POST',
             url: $(this).attr('action'),
             data:formData,
             cache:false,
             contentType: false,
             processData: false,
             success:function(data){
             $.ajax({
                 contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
                 , method: 'post'
                 , url: 'property_info_box.php'
                 , data: {id: parseInt(data)}
                 , success: function(page){
                     $('#property_info_box', parent.document).html(page);
                     return false; }
                 });
             },
             error: function(data){ console.log(data); }
        });
    });
    $("#property_image_chooser").on("change", function(e){
        $("#property_image_uploader").submit();
    });

问题是，每次$('#property_image_chooser')改变，$('#property_image_uploader')提交被触发两次。我曾试图将e.p preventdefault()和e.p stopimmediatepropagation()在这两个函数内的任何地方，这个问题消失了，但随后，加载在第二个ajax调用冻结的页面，没有按钮可以被触发了…

通过在提交时添加e.p preventdefault()并在第二次ajax调用时删除'return false'来解决所有问题。最后的代码看起来像这样:

$('#property_image_uploader').on('submit',function(e) {
     var formData = new FormData(this);
     $.ajax({
         type:'POST',
         url: $(this).attr('action'),
         data:formData,
         cache:false,
         contentType: false,
         processData: false,
         success:function(data){
         $.ajax({
             contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
             , method: 'post'
             , url: 'property_info_box.php'
             , data: {id: parseInt(data)}
             , success: function(page){
                 $('#property_info_box', parent.document).html(page); }
             });
         },
         error: function(data){ console.log(data); }
    });
});
$("#property_image_chooser").on("change", function(e){
    e.preventDefault();
    $("#property_image_uploader").submit();
});