加载后手风琴不工作(accordion not working after load)

加载后手风琴不工作(accordion not working after load)

我刚刚遇到了jQuery手风琴的问题。 我正在做的是从php页面“jobsload.php”加载新的内容。 用新内容更新页面后，手风琴不起作用。 我也尝试过破坏财产，但徒劳无益。

这里是代码

$('#postjob').click(function () { //Get the data from all the fields var title = $('#jobtitle'); var date = $('#jobdate'); var status = $('#status'); var desc = $('#jobdesc'); //Simple validation to make sure user entered something //If error found, add error-highlight class to the text field if (title.val()=='') { title.addClass('error-highlight'); return false; } else title.removeClass('error-highlight'); if (date.val()=='') { date.addClass('error-highlight'); return false; } else date.removeClass('error-highlight'); if (desc.val()=='') { desc.addClass('error-highlight'); return false; } else desc.removeClass('error-highlight'); var data; if($("#jobid").val()=="") { data = 'title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val(); } else data = 'id=' + $("#jobid").val() + '&title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val(); //organize the data properly // Disable fields //$('.text-label, .textarea-label').attr('disabled','true'); //show the loading sign $('.loading-contact').show(); //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "postjob.php", //GET method is used type: "POST", //pass the data data: data, //Do not cache the page cache: false, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide the form //show the success message $('.loading-contact').fadeOut('slow'); //show the success message $('.success-message').slideDown('slow'); $('.success-message').delay(1000).slideUp('slow'); $('#jobsload').load("jobsload.php"); // Disable send button //$('#send').attr('disabled',true); //if process.php returned 0/false (send mail failed) } else { $('.loading-contact').fadeOut('slow') alert('Sorry, unexpected error. Please try again later.'); } } }); //cancel the submit button default behaviours $('#accordion').accordion('destroy').accordion({ heightstyle: "content" }); return false; });

HTML代码

<div id="jobsload" style="clear:both"> <div class="panel"> <div class="panel-heading"><center>Available Positions</center></div> <div class="row"> <?php $sql = "SELECT * FROM jobs where valid='YES'"; $res = mysql_query($sql) or die(mysql_error()); ?> <div class="personalInfo" id="accordion"> <?php while ($row = mysql_fetch_array($res)) { ?> <h6 class="media-heading historyHeading"> <span style="width:80%;"><a href="#"><?php echo $row['title'];?></a></span> <span style="width:20%;">(<?php echo $row['date'];?>)</span> </h6> <div> <p><?php echo $row['description'];?></p> </div> <?php } ?> </div> </div> </div> <div class="panel"> <div class="panel-heading"><center>Positions Filled</center></div> <div class="row"> <?php $sql = "SELECT * FROM jobs where valid='NO'"; $res = mysql_query($sql) or die(mysql_error()); ?> <ul class="personalInfo"> <?php $mycount=1; while ($row = mysql_fetch_array($res)) { ?> <li> <span> <div style="width:100%; border:thin #666666"> <div style="float:left; width:5%"> <p style="margin-left:10px; margin-top:5px" > <?php echo $mycount; $mycount++; ?> </p> </div> <div style="float:left; width:85%"> <h6 class="media-heading historyHeading"> <?php echo $row['title'];?> </h6> </div> <div style="float:right; width:10%"> <h6 class="media-heading historyHeading"> <?php echo $row['date'];?> </h6> </div> </div> </span> <div class="clearfix"></div> </li> <?php } ?> </ul> <!-- add this line to add small portfolio --> </div>

感谢您的帮助。

I just encountered a problem with jquery accordion. What I am doing is loading new content from a php page "jobsload.php". After updating the page with new content, accordion doesnot work. I have tried the destroy property too but in vain.

here is the code

$('#postjob').click(function () { //Get the data from all the fields var title = $('#jobtitle'); var date = $('#jobdate'); var status = $('#status'); var desc = $('#jobdesc'); //Simple validation to make sure user entered something //If error found, add error-highlight class to the text field if (title.val()=='') { title.addClass('error-highlight'); return false; } else title.removeClass('error-highlight'); if (date.val()=='') { date.addClass('error-highlight'); return false; } else date.removeClass('error-highlight'); if (desc.val()=='') { desc.addClass('error-highlight'); return false; } else desc.removeClass('error-highlight'); var data; if($("#jobid").val()=="") { data = 'title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val(); } else data = 'id=' + $("#jobid").val() + '&title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val(); //organize the data properly // Disable fields //$('.text-label, .textarea-label').attr('disabled','true'); //show the loading sign $('.loading-contact').show(); //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "postjob.php", //GET method is used type: "POST", //pass the data data: data, //Do not cache the page cache: false, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide the form //show the success message $('.loading-contact').fadeOut('slow'); //show the success message $('.success-message').slideDown('slow'); $('.success-message').delay(1000).slideUp('slow'); $('#jobsload').load("jobsload.php"); // Disable send button //$('#send').attr('disabled',true); //if process.php returned 0/false (send mail failed) } else { $('.loading-contact').fadeOut('slow') alert('Sorry, unexpected error. Please try again later.'); } } }); //cancel the submit button default behaviours $('#accordion').accordion('destroy').accordion({ heightstyle: "content" }); return false; });

HTML CODE

<div id="jobsload" style="clear:both"> <div class="panel"> <div class="panel-heading"><center>Available Positions</center></div> <div class="row"> <?php $sql = "SELECT * FROM jobs where valid='YES'"; $res = mysql_query($sql) or die(mysql_error()); ?> <div class="personalInfo" id="accordion"> <?php while ($row = mysql_fetch_array($res)) { ?> <h6 class="media-heading historyHeading"> <span style="width:80%;"><a href="#"><?php echo $row['title'];?></a></span> <span style="width:20%;">(<?php echo $row['date'];?>)</span> </h6> <div> <p><?php echo $row['description'];?></p> </div> <?php } ?> </div> </div> </div> <div class="panel"> <div class="panel-heading"><center>Positions Filled</center></div> <div class="row"> <?php $sql = "SELECT * FROM jobs where valid='NO'"; $res = mysql_query($sql) or die(mysql_error()); ?> <ul class="personalInfo"> <?php $mycount=1; while ($row = mysql_fetch_array($res)) { ?> <li> <span> <div style="width:100%; border:thin #666666"> <div style="float:left; width:5%"> <p style="margin-left:10px; margin-top:5px" > <?php echo $mycount; $mycount++; ?> </p> </div> <div style="float:left; width:85%"> <h6 class="media-heading historyHeading"> <?php echo $row['title'];?> </h6> </div> <div style="float:right; width:10%"> <h6 class="media-heading historyHeading"> <?php echo $row['date'];?> </h6> </div> </div> </span> <div class="clearfix"></div> </li> <?php } ?> </ul> <!-- add this line to add small portfolio --> </div>

thank you for your help.

最满意答案

如果我没有错，下面的代码加载你的新内容：

$('#jobsload').load("jobsload.php");

而不是通话后。

您需要重新初始化ajaxloaded内容，因为它不在dom中，当jquery被初始化时。

在答案Kuma中，手风琴在负载被调用的同时触发。 不是代码成功后。

请参阅下面的代码以使用jobsload的成功功能

$('#jobsload').load("jobsload.php", function( response, status, xhr ) { if (status == "success") { // Place reload the accordion code here } if ( status == "error" ) { // optional: place error code here. // if you don't place this, user will not receive notification of failure. } });

If i'm correct the following code loads your new content:

$('#jobsload').load("jobsload.php");

and not the post call.

You need to re-initialize ajaxloaded content, because it's not in the dom, when jquery is initialized.

In the answer Kuma, the accordion is triggered at the same time as the load is being called. Not after the success of the code.

See code beneath to use the success function of the jobsload

$('#jobsload').load("jobsload.php", function( response, status, xhr ) { if (status == "success") { // Place reload the accordion code here } if ( status == "error" ) { // optional: place error code here. // if you don't place this, user will not receive notification of failure. } });