php – 手风琴在加载后无法正常工作

我刚刚遇到了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> 

谢谢您的帮助.

解决方法:

如果我没错,以下代码会加载您的新内容：

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

而不是邮局.

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

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

请参阅下面的代码以使用jobsload的success函数

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