Question

我有以下js代码：

        $("#add_station").on('click', function() {

           $(this).closest('form').submit(function () {
                    alert("working!");
            $.ajax({
                url: advoke.base_url+"/new-vendor-user/station/ajax",
                method: 'post',
                processData:false,
                contentType: false,
                cache: false,
                dataType: 'json',
                data: new FormData(this),
                beforeSend: function() {

                    $('.info').hide().find('ul').empty();

                    $('.success_message').hide().find('ul').empty();

                    $('.db_error').hide().find('ul').empty();
                },
                success:function(data){

                    if(!data.success) {

                        $.each(data.error,function(index, val) {

                                $('.info').find('ul').append('<li>'+val+'</li>');

                        });

                            $('.info').slideDown();
                            setTimeout(function(){$(".info").hide();},5000);

                    }else {
                        $('.success_message').slideDown();
                        $('#add_station').remove();
                        $("#station").append(data.new_station);
                        setTimeout(function(){$(".success_message").hide();},5000);

                    }//success

                },
                error:function(){

                                //db error
                                $('.db_error').append('<li>Something went wrong, please try again!</li>');
                                $('.db_error').slideDown();
                                //Hide error message after 5 seconds
                                setTimeout(function(){$(".db_error").hide();},5000);

                }//error
            });
            });
             return false;
        });

当我点击ID为add_station的按钮时，它会在$（$ this）.closest（＆＃39; form＆＃39;）之后发出点击功能的提醒。submit（function（）{...）它没有＆＃39因为你可以看到我已经发出了警报＆＃39;工作＆＃39;在提交功能之后。我在控制台上没有错误，我无法确定问题是什么。点击的按钮也在表单内。

我需要使用$（$ this）.closest（＆＃39; form＆＃39;）。submit（function（）{...）里面因为ajax成功后将使用add station按钮生成一个新表单将使用此代码。

Answer 1

您应该使用

来阻止默认的提交触发器

e.preventDefault();

$(this).closest('form').submit(function (e) {

e.preventDefault();

<!--rest of the code-->

})

Answer 2

在ajax成功之后，将使用add station生成一个新表单将使用此代码的按钮

如果您生成一个新按钮，则必须在将该按钮放入dom后再次绑定该按钮。

Answer 3

添加单独的提交处理程序

$("#add_station").on('click', function() {

           $(this).closest('form').submit();

        });


$("form").on("submit",function (e) {
  e.preventDefault();

                    alert("working!");
            $.ajax({
                url: advoke.base_url+"/new-vendor-user/station/ajax",
                method: 'post',
                processData:false,
                contentType: false,
                cache: false,
                dataType: 'json',
                data: new FormData(this),
                beforeSend: function() {

                    $('.info').hide().find('ul').empty();

                    $('.success_message').hide().find('ul').empty();

                    $('.db_error').hide().find('ul').empty();
                },
                success:function(data){

                    if(!data.success) {

                        $.each(data.error,function(index, val) {

                                $('.info').find('ul').append('<li>'+val+'</li>');

                        });

                            $('.info').slideDown();
                            setTimeout(function(){$(".info").hide();},5000);

                    }else {
                        $('.success_message').slideDown();
                        $('#add_station').remove();
                        $("#station").append(data.new_station);
                        setTimeout(function(){$(".success_message").hide();},5000);

                    }//success

                },
                error:function(){

                                //db error
                                $('.db_error').append('<li>Something went wrong, please try again!</li>');
                                $('.db_error').slideDown();
                                //Hide error message after 5 seconds
                                setTimeout(function(){$(".db_error").hide();},5000);

                }//error
            });

  });

Jquery $（this）.closest（＆＃39; form＆＃39;）;点击按钮后无法正常工作

3 个答案: