手风琴加载后不工作

Question

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

感谢你的帮助。

Answer 1

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

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

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