jQuery的功能不工作在AJAX数据返回

Question

我有一个脚本即时通讯写入，使用AJAX插入一条记录到我的数据库。

一旦做到这一点，该数据目前调回为使...

Print "<li>"; 
     Print "<span class='cost'>".$bill . "</span> "; 
     Print "<h4 class='bill-name'>".$$billname . "</h4> "; 
     Print "<p class='bill-details'><span class='bill-category'>".$billdescription . "</span> "; 
     Print "<span class='bill-description'>". $billcolour . "</span></p>"; 
    echo "<a href='#' class='edit-bill'>edit</a> 

     <form class='bill-upd'> 
     <input type='hidden' value='".$rand."' name='rand2' id='rand2'> 
      <input type='hidden' value='". $billname."' name='billid' id='billid''> 
      Total <input type='text' id='total' name='total' /><br /> 
      Bill name<input type='text' id='bill-name' name='bill-name' /><br /> 
      bill descriptiion <input type='text' id='bill-description' name='bill-description' /><br /> 
      bill colour<input type='text' id='bill-colour' name='bill-colour' /> 
     <input type='button' value='submit' onClick='updateBill();' /> 
     </form> 

     <form class='delete-bill'> 
      <input type='hidden' value='".$info['rand']."' name='rand2' id='rand2'> 

     <input type='button' value='delete' class='delete' /> 
     </form> 

     "; 
     echo "</li>"; 

的形式在页面上，在相同的标记使用jQuery的功能，如的slideToggle（）分配给“编辑“，显示下面的表单。然而，我的问题是，这个jQuery不能在返回的数据上工作，我试过谷歌，无法弄清楚，有任何想法？

---

的jQuery的编辑功能...

// Show bill edit information 

$('.edit-bill').click(function(){ 
    $(this).next('.bill-upd').slideToggle(); 
    return false; 
          }); 

---

AJAX

function insertBill() 
{ 
    $.post('insert_bill.php', $('#insertbill').serialize(), 
     function(data) { 
     $('#bills').append(data); 
    }); 
}; 

Answer 1

更改此

$('.edit-bill').click(function(){ 
    $(this).next('.bill-upd').slideToggle(); 
    return false; 
}); 

$(document).on("click",".edit-bill",function(){ 
    $(this).next('.bill-upd').slideToggle(); 
    return false; 
}); 

http://api.jquery.com/on/

on将当前元素和未来的工作元件（通过AJAX加载左右..）

上可从jQuery的1.7+。如果您在使用jQuery的先前版本，考虑live

Answer 2

，或者你可以从

$('.edit-bill').click(function(){ 
    $(this).next('.bill-upd').slideToggle(); 
    return false; 
}); 

改变

$('.edit-bill').on("click",".edit-bill",function(){ 
    $(this).next('.bill-upd').slideToggle(); 
    return false; 
});