CODEWITHSUNDEEP
javascriptjqueryajax
Liam
Liam

Reputation: 9855

jQuery functions not working on AJAX data return

I have a script im writing that inserts a record into my DB using AJAX.

Once this is done, the data is posted back as so...

 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>";

The forms currently on the page, in the same markup use jQuery functions such as slideToggle() that is assigned to 'edit' that shows the form below it. My problem is however that this jQuery doesn't work on the data returned, I've tried google and couldn't figure it out, has anybody an idea?

jQuery for edit function...

// 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);
    });
};

Upvotes: 0

Views: 733

Answers (2)

Clark T.
Clark T.

Reputation: 1470

or you could change from

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

to

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

Upvotes: 2

Shyju
Shyju

Reputation: 218822

Change this

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

to 

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

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

on will work for current elements and future elements (loaded via ajax or so..)

on is available from jQuery 1.7+. If you are using a previous version of jQuery, consider live

Upvotes: 1

Related Questions