jQuery functions not working on AJAX data return

Question

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

I mean the AJAX response and the code with the AJAX call would be helpfull too. — aldux
– aldux, Commented Apr 23, 2012 at 19:49

Clark T. · Accepted Answer · 2013-02-08 14:12:47Z

2

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

edited Feb 8, 2013 at 14:12

answered Apr 23, 2012 at 20:53

Clark T.

1,4702 gold badges11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shyju · Accepted Answer · 2012-04-23 20:08:19Z

1

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

answered Apr 23, 2012 at 20:08

Shyju

220k106 gold badges421 silver badges499 bronze badges

Collectives™ on Stack Overflow

jQuery functions not working on AJAX data return

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related