两天来我只和一件事斗争。。。但我只是放弃了!我已经做了一个JSFIDLE来检查它,可能是我的代码错了或其他什么。。但是该代码在JSFIDLE上运行良好,但在我的this页面(在另一个子页面上,该代码运行正常)上则不行。。。
我使用WPJob Manager Resumes... 我按代码生成页面[简历]
按插件WPBakery Page Builder 我将自定义JS添加到子页面。所有代码的工作方式都类似于:alert(“test”),但不适用于以下情况:
<script>
jQuery(document).ready(function($){
$(".more-info").click(function(){
$(this).closest(\'.resume_list\').find(\'.main-box-info\').slideToggle();
$(this).closest(\'.more-info\').find(\'span.click-show-notes, span.click-hide-notes\').toggle();
});
});
</script>
<ul class="resumes">
<li class="resume_list" style="display: flow-root">
<div class="resume-detalis">
<div class="resume-title-col resume-column">
<h5 class="job-offer-title"><a href="#">Kunegunda Wsteczna</a></h5>
</div>
<div class="resume-location resume-column">
<span class="locaction-resume">Wsteczna, Mongolia</span>
</div>
<ul class="meta-info resume-column">
<li><span class="current-status-candidate szukam-pracy" style="white-space: nowrap;margin-right:6px;display:inline-block">I\'m looking for a job</span> </li>
<li class="resume-last-update">
<i>ost. akt.:</i> 1 min temu </li>
</ul>
</div>
<div class="more-info" style="cursor:pointer;border-radius: 5px; border: 1px solid #ccc!important; color: #515151; background: #f6f6f6; width: fit-content; margin-right: auto!important; margin-top: 5px!important; position: relative; font-size: 15px; padding: 0 7px;"><span class="click-show-notes">Show more<i class="fas fa-arrow-down" style="margin-left: 8px"></i></span><span class="click-hide-notes" style="display:none">Show less<i class="fas fa-arrow-up" style="margin-left: 8px"></i></span></div>
<div class="main-box-info" style="display:none;">
<div class="main-box-info-tab">
<table class="main-table-resume">
<tbody>
<tr>
<td class="main-info-table-res dob">Date of birth</td>
<td class="dob"><div class="icon-div"><i class="far fa-calendar-alt icon-in-table"></i></div>
14.07.1981 (37 lat) </td>
</tr>
<tr>
<td class="main-info-table-res">Phone</td>
<td><div class="icon-div"><i class="far fa-mobile-android-alt icon-in-table"></i></div>
<a href="tel:0048596596321">0048596596321</a></td>
</tr>
<tr>
<td class="main-info-table-res">Date of registration</td>
<td style="white-space: nowrap"><div class="icon-div"><i class="far fa-at icon-in-table"></i></div>
14.07.2018</td>
</tr>
</tbody>
</table></div>
</div>
</li>
<li class="resume_list" style="display: flow-root">
<div class="resume-detalis">
<div class="resume-title-col resume-column">
<h5 class="job-offer-title"><a href="#">Tobiasz Rokiewicz</a></h5>
</div>
<div class="resume-location resume-column">
<span class="locaction-resume">Płock, Polska</span>
</div>
<ul class="meta-info resume-column">
<li><span class="current-status-candidate szukam-pracy" style="white-space: nowrap;margin-right:6px;display:inline-block">I\'m looking for a job</span> <span class="current-status-candidate fhs" style="white-space: nowrap;display:inline-block">fhs</span></li>
<li class="resume-last-update">
<i>ost. akt.:</i> 14 hours temu </li>
</ul>
</div>
<div class="more-info" style="cursor:pointer;border-radius: 5px; border: 1px solid #ccc!important; color: #515151; background: #f6f6f6; width: fit-content; margin-right: auto!important; margin-top: 5px!important; position: relative; font-size: 15px; padding: 0 7px;"><span class="click-show-notes">Show more<i class="fas fa-arrow-down" style="margin-left: 8px"></i></span><span class="click-hide-notes" style="display:none">Show less<i class="fas fa-arrow-up" style="margin-left: 8px"></i></span></div>
<div class="main-box-info" style="display:none;">
<div class="extra-box-notes one-box">
<div class="frame-box title-box"><b>Notes</b></div>
<div class="frame-box content-box"><p>fafasfasfasfasf</p>
</div>
</div>
<div class="main-box-info-tab one-box">
<table class="main-table-resume">
<tbody>
<tr>
<td class="main-info-table-res dob">Date of birth</td>
<td class="dob"><div class="icon-div"><i class="far fa-calendar-alt icon-in-table"></i></div>
11.06.1994 (24 lat) </td>
</tr>
<tr>
<td class="main-info-table-res">Phone</td>
<td><div class="icon-div"><i class="far fa-mobile-android-alt icon-in-table"></i></div>
<a href="tel:653984523">653984523</a></td>
</tr>
<tr>
<td class="main-info-table-res">Date of registration</td>
<td style="white-space: nowrap"><div class="icon-div"><i class="far fa-at icon-in-table"></i></div>
11.07.2018</td>
</tr>
</tbody>
</table></div>
</div>
</li>
</ul>
JSFIDLE(JSIDLE):
http://jsfiddle.net/z780Lgqa/1/以下是生成此内容的部分代码:https://pastebin.com/raw/j9vZs9su
下面是“预览外观”页面:
http://tnijurl.com/070543be664d/
上面的代码已粘贴在页面中。为什么这不起作用?怎么了?我受不了。有人能帮我吗?
非常感谢。
最合适的回答,由SO网友:kibus90 整理而成
好吧,我找到了解决办法。。。问题是因为加载了AJAX的内容
如果我使用此选项,则我的代码有效:
jQuery(document).ajaxComplete(function($){
jQuery(document).ready(function($){
$(".more-info").click(function(){
$(this).closest(\'.resume_list\').find(\'.main-box-info\').slideToggle();
$(this).closest(\'.more-info\').find(\'span.click-show-notes, span.click-hide-notes\').toggle();
});
});
})