关键词：
【中文标题】使用 ajax 请求时，jquery 和样式不起作用【英文标题】：jquery and styles not working when requested with ajax 【发布时间】：2021-11-01 21:59:35 【问题描述】：我有常见问题解答页面，我在其中根据类别显示常见问题解答。当我第一次加载页面时，FAQ向上和向下滑动工作正常，但是当我点击其他选项卡进行类别搜索时，那些FAQ会显示出来，但没有js和css工作。
这是我的常见问题页面代码：
<div class="faq-ajax-wrapper">
<ul class="accordion-list">
<?php
$faq_count = 1;
$args = array(
'post_type' => 'faq',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'desc',
);
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() )
while ( $query->have_posts() )
$query->the_post();
?>
<li>
<h3><span class="bullet"><?php echo $faq_count++; ?></span> <?php the_title(); ?></h3>
<div class="answer">
<?php the_content(); ?>
</div>
</li>
<?php wp_reset_postdata(); ?>
</ul>
</div>
常见问题的JS代码
<script>
jQuery(document).ready(function()
jQuery('.accordion-list > li > .answer').hide();
jQuery('.accordion-list > li').click(function()
alert('test');
if (jQuery(this).hasClass("active"))
jQuery(this).removeClass("active").find(".answer").slideUp();
else
jQuery(".accordion-list > li.active .answer").slideUp();
jQuery(".accordion-list > li.active").removeClass("active");
jQuery(this).addClass("active").find(".answer").slideDown();
// return false;
);
);
</script>
这是我的 AJAX 代码
jQuery(".faq-tabs .faq-filter").on("click", function()
jQuery('.faq-tabs .faq-filter.active').removeClass('active');
jQuery(this).addClass('active');
faqHandler();
);
jQuery.fn.keyupDelay = function( cb, delay )
if(delay == null)
delay = 400;
var timer = 0;
return $(this).on('keyup',function()
clearTimeout(timer);
timer = setTimeout( cb , delay );
);
jQuery("#faq-search").keyupDelay( faqHandler );
function faqHandler()
var faq_tabs = $( '.faq-tabs .faq-filter.active' ).data("category-id");
var faq_search = $( '#faq-search' ).val();
faqdata =
'action': 'filter_faqs',
'faq_tabs': faq_tabs,
'faq_search': faq_search
;
jQuery.ajax(
url : blog.ajaxurl,
data : faqdata,
type : 'POST',
beforeSend : function ( xhr )
$('.faq-loader').css( 'display', 'block' );
,
success : function( faqdata )
if ( faqdata )
$('.faq-loader').css( 'display', 'none' );
$('.faq-ajax-wrapper').html( faqdata.faqposts );
else
$('.faq-loader').css( 'display', 'none' );
$('.faq-ajax-wrapper').html( 'No posts found.' );
);
function ajax_filter_faqs_handler()
$faq_category = esc_attr( $_POST['faq_tabs'] );
$faq_search = esc_attr( $_POST['faq_search'] );
$faq_args = array(
'post_type' => 'faq',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC',
);
if ( $faq_category != 'all' )
$faq_args['tax_query'] = array(
array(
'taxonomy' => 'faq_category',
'field' => 'id',
'terms' => $faq_category,
),
);
if ( $faq_search != '' )
$faq_args['s'] = $faq_search;
$faqposts = 'No posts found.';
$faq_count = 1;
$faq_query = new WP_Query( $faq_args );
if ( $faq_query->have_posts() ) :
ob_start(); ?>
<ul class="accordion-list">
<?php while ( $faq_query->have_posts() ) : $faq_query->the_post(); ?>
<li>
<h3><span class="bullet"><?php echo $faq_count++; ?></span> <?php the_title(); ?></h3>
<div class="answer">
<?php the_content(); ?>
</div>
</li>
<?php endwhile; ?>
</ul>
<?php $faqposts = ob_get_clean();
endif; wp_reset_postdata();
$return = array(
'faqposts' => $faqposts
);
wp_send_json($return);
add_action( 'wp_ajax_filter_faqs', 'ajax_filter_faqs_handler' );
add_action( 'wp_ajax_nopriv_filter_faqs', 'ajax_filter_faqs_handler' );
基本上，我有 All、Tech、Food 之类的标签。我正在使用 ajax 来过滤它。问题是常见问题解答JS和CSS在AJAX请求上根本不起作用。
【问题讨论】：
我看到您在 JS Code for FAQ 中隐藏了您的手风琴列表：jQuery('.accordion-list > li > .answer').hide();你在哪里让它再次可见？ 如果读取下一行，则显示在单击中。但是当我使用 Ajax 请求时，当我点击常见问题解答时，即使警报也不起作用，但是当我正常加载并点击时，警报工作正常。 您可以在 JSFiddle 上设置您的代码以便对其进行测试吗？ 您是说向上/向下滑动不适用于 ajax 刷新的内容吗？ 是的，我已经修好了。 【参考方案1】：这对我来说很好。
<script>
jQuery(document).ready(function()
jQuery('.accordion-list > li > .answer').hide();
jQuery('body').on('click','.accordion-list > li',function()
// jQuery('.accordion-list > li').click(function()
if (jQuery(this).hasClass("active"))
jQuery(this).removeClass("active").find(".answer").slideUp();
else
jQuery(".accordion-list > li.active .answer").slideUp();
jQuery(".accordion-list > li.active").removeClass("active");
jQuery(this).addClass("active").find(".answer").slideDown();
return false;
);
);
</script>
【讨论】：
使用 jQuery .ajax() PUT 请求 API 不起作用
】使用jQuery.ajax()PUT请求API不起作用【英文标题】：RequestinganAPIwithjQuery.ajax()PUTisnotworking【发布时间】：2017-08-2513:10:37【问题描述】：您好，我在使用jquery向api发出PUT请求时遇到问题。这是我的JavaScript：varaccess_token="##token##";varserv... 查看详情
当我从 Ajax (jQuery) 发送请求时，会话在 Flask 代码中不起作用
...述】：在用户登录他的帐户后，我在flask（python框架）中使用用户的电子邮件ID创建了一个会话。好的，它工作正常，并且在我交叉检查时创建了会话。它的网址是"h 查看详情
使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用
】使用jQueryAJAX向所需的PHPPOST请求处理程序提交表单不起作用【英文标题】：SubmittingFormwithjQueryAJAXtotherequiredPHPPOSTrequesthandlerisnotworking【发布时间】：2020-01-2212:04:57【问题描述】：每当我使用jqueryajax向PHPapi提交表单时，表单都不... 查看详情
使用Phonegap的IOS上的Jquery ajax请求-Ajax不起作用
】使用Phonegap的IOS上的Jqueryajax请求-Ajax不起作用【英文标题】：JqueryajaxrequestonIOSusingPhonegap-Ajaxnotworking【发布时间】：2012-03-1001:35:40【问题描述】：我有一个简单的html登录表单，使用phonegap框架部署在Xcode上。单击submitLogin按钮后... 查看详情
使用 AJAX 提交时发送电子邮件不起作用
】使用AJAX提交时发送电子邮件不起作用【英文标题】：SendemailonsubmitwithAJAXisnotworking【发布时间】：2021-12-3123:44:05【问题描述】：我想在单击按钮时发送电子邮件。该按钮是使用引导程序5创建的。然后Jquery将向应发送电子邮件的... 查看详情
使用 node.js 和 express 的 JQuery Ajax 发布请求
】使用node.js和express的JQueryAjax发布请求【英文标题】：JQueryAjaxpostrequestwithnode.jsandexpress【发布时间】：2012-12-1306:06:32【问题描述】：我试图在Node.JS和Express中使用JQuery向我的Node.JS服务器发出AJAX发布请求，但它不起作用！varexpress=... 查看详情
发送范围请求时jQuery CORS请求不起作用
...equest【发布时间】：2012-04-0700:57:04【问题描述】：我正在使用jQuery的ajax调用来发出CORS请求，如果我设置了它就可以工作varheaders=;但由于我要获取的内容相当大，我想发送范围标头。（所有这些都经过测试并在同一个域中工作）... 查看详情
跨域 AJAX 请求不起作用
...:10:47【问题描述】：我正在通过jQuery的$.ajax函数在我一直使用的第三方API上调用POST。但是，当我拨打电话时，出现以下错误：XMLHttpRequestcannotloadhttp://the-url.com.Therequestwasredirectedto\'http:/ 查看详情
收到ajax POST请求时PHP mail（）不起作用
...2015-04-2300:40:34【问题描述】：我已经设置了一个表单，它使用jQueryajax向外部php文件发送POST请求，然后发送电子邮件。我收到200状态码，但没有收到电子邮件。这里是jQuery：varajaxSend=function(data 查看详情
在使用 POSTMAN 时，AJAX POST 请求不起作用
】在使用POSTMAN时，AJAXPOST请求不起作用【英文标题】：AJAXPOSTrequestnotworkingwhileworkingonPOSTMAN【发布时间】：2021-12-2401:34:58【问题描述】：我正在尝试通过AJAX请求发布数据。这是执行此操作的代码：console.log(quote)$.ajax(url:\'path(\'set_p... 查看详情
jQuery：我可以在较长的 $.ajax 请求待处理时发送和接收 $.ajax 响应吗？
...发布时间】：2013-06-1804:44:46【问题描述】：情况：我正在使用$.ajax()POST向php脚本发送请求，该脚本将大约400,000-500,000行插入到数据库中。这始 查看详情
使用 django ajax jquery 提交一个文件不起作用的表单
】使用djangoajaxjquery提交一个文件不起作用的表单【英文标题】：submitaformwithfilenotworkingusingdjangoajaxjquery【发布时间】：2019-06-0607:22:29【问题描述】：当用户提交表单时，在其他数据旁边上传图片。在jquery中使用formData。我在模型... 查看详情
Ajax成功功能在jquery mobile中不起作用
...【发布时间】：2016-03-2418:49:49【问题描述】：我正在尝试使用用户名和密码字段验证基本登录表单。我需要从check.phpajax页面验证用户名和密码。ajax请求和响应没有问题。我从ajax页面得到了正确的响应。但是Ajax成功函数不能正... 查看详情
使用 jQuery Ajax 和 PHP 的 CORS 请求
】使用jQueryAjax和PHP的CORS请求【英文标题】：CORSRequestwithjQueryAjax&PHP【发布时间】：2014-09-1321:13:15【问题描述】：我已经尝试了很多次来让这个工作，但似乎无法维持生计。当我第一次实现这个时，它可以完美地处理一些请求... 查看详情
没有样式的 AJAX 请求 jQuery 链接
】没有样式的AJAX请求jQuery链接【英文标题】：AJAXRequestjQueryLinkwithnostyles【发布时间】：2013-03-1805:58:03【问题描述】：我有这个代码。它获取请求数据并刷新显示在DIV中。为什么它可以在DIV中显示像“简单文本”这样的请求数据... 查看详情
jquery - 使用 .done()、.then() 和 .when() 以给定顺序发出 ajax 请求
】jquery-使用.done()、.then()和.when()以给定顺序发出ajax请求【英文标题】：jquery-usageof.done(),.then()and.when()formakingajaxrequestsinagivenorder【发布时间】：2019-01-2617:55:24【问题描述】：我一直在阅读有关jquery中Promises的大量信息，并在发出... 查看详情
使用 Ajax 请求创建元素和 appendChild
】使用Ajax请求创建元素和appendChild【英文标题】：UsingAjaxrequesttocreateelementandappendChild【发布时间】：2011-10-0720:51:41【问题描述】：我正在尝试制作一个脚本以在使用ajax/appendChild单击当前字段时添加一个输入字段，但它不起作用... 查看详情
当通过 ajax 加载表单时，jQuery 的 live 和 livequery 对我不起作用
】当通过ajax加载表单时，jQuery的live和livequery对我不起作用【英文标题】：jQuery\'sliveandlivequerynotworkingformewhentheformisloadedthroughajax【发布时间】：2010-12-1916:56:11【问题描述】：我之前问过类似的问题HowcanIhavejqueryattachbehaviortoanelement... 查看详情