Jquery$(this）.最接近('form'）;点击按钮后不工作

Jquery $(this).closest('form'); not working after button click

本文关键字：按钮 工作 form 最接近 Jquery this      更新时间：2023-09-26

我有以下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('form').submit(function(){...)之后的点击功能上发出警报，但它不起作用，正如你所看到的，我在提交功能之后发出了"有效"的警报。我在控制台上没有错误，我不知道问题出在哪里。此外，被点击的按钮在表单内。

我需要在里面使用$($this).closest('form').submit(function(){...)，因为在ajax成功后，将生成一个新的表单，其中包含将使用此代码的addstation按钮。

您应该使用来阻止默认的提交触发器

e.preventDefault();
$(this).closest('form').submit(function (e) {
e.preventDefault();
<!--rest of the code-->
})

添加一个单独的提交处理程序

$("#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
   });
});

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

如果你生成了一个新按钮，你必须在点击被放置到dom后再次绑定它。

相关文章：