ajax表单提交后向元素添加css答案

【问题标题】：Add css to element after an ajax form submissionajax表单提交后向元素添加css
【发布时间】：2019-03-27 15:10:52
【问题描述】：

我在一个通过 ajax 请求提交的 drupal 站点中有一个网络表单。

在 PHP 标记中，我展示了一个使用 ajax 提交的表单，sn-p 如下所示：

if(isset($_GET['dev-testing'])) {

  $block = module_invoke('webform', 'block_view', 'client-block-139');
  print render($block['content']);
  ?>
  <div class="unique" style="display: none;">              
    <?php

    print l('Download info pack', render($entry_info), array('attributes' => array('class' => array('btn', 'btn-border hidden-link'), 'target' => '_blank')));?>

  </div>

<?php } ?>

我希望能够在提交表单后将 CSS 添加到唯一类的 div。

试过了，点击提交按钮后没有任何效果：

$("button.webform-submit").on('submit', function(){
    $('.unique').css("display", "block");
});

还尝试使用 ajaxSend 和 Complete。没有任何效果

$(document).ajaxSend(function() {
     $('.unique').css("display", "block");
});

$(document).ajaxComplete(function(event, request, settings) {
    $('.unique').css("display", "block");
});

我怎样才能做到这一点？

【问题讨论】：

您还没有真正提供足够的信息来保证明确的答案。你的 HTML 是什么样的？您如何确定尚未应用 CSS？
您的 ajax 请求是如何发送的？
我刚刚编辑了问题
您的 PHP 不相关。 JavaScript 作用于呈现的 HTML。请出示。
这里仍然没有足够的信息。你在哪里加载 jquery，你的 ajax 请求在哪里？

标签： jquery ajax

【解决方案1】：

您可以将 PreventDefault() 添加到表单的按钮

$('button.webform-submit').on('click', function(e)) {
   e.PreventDefault()
}

这可以防止发生提交。现在您可以添加更改 css 代码

 $('.unique').css("display", "block");

最后但同样重要的是，手动提交表单

$('#idForm').submit();

最终代码：

$('button.webform-submit').on('click', function(e)) {
   e.PreventDefault();
   $('.unique').css("display", "block");
   $('#idForm').submit();
}

https://api.jquery.com/event.preventdefault/

https://api.jquery.com/submit/

【讨论】：