加载后手风琴不工作

Question

我刚刚遇到了 jquery 手风琴的问题。我正在做的是从 php 页面“jobsload.php”加载新内容。用新内容更新页面后，手风琴不起作用。我也尝试过destroy属性，但没有成功。

这里是代码

$('#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> 

感谢您的帮助。

Answer 1

如果我是正确的，下面的代码会加载你的新内容：

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

而不是邮寄电话。

你需要重新初始化ajax加载的内容，因为它不在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.
    }
});

Answer 2

您应该在 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)

            //cancel the submit button default behaviours
            $('#accordion').accordion('destroy').accordion({ heightstyle: "content" });
            return false;
        } else
        {
            $('.loading-contact').fadeOut('slow')
            alert('Sorry, unexpected error. Please try again later.');
        }
    }