CODEWITHSUNDEEP
jquery
John
John

Reputation: 105

how do i maniputate table rows appended to an existing table in jquery

I have appended table rows with input elements to an existing table as follows:

$("#additems_table").append(
"<tr><td style='color:#999; font-size:16px;'>"+(counter++)+"</td><td>
<select class='item'><?php while($product_rows=mysql_fetch_assoc($productSQL)){?><option value='<?php echo $product_rows['pid']; ?>'><?php echo $product_rows['name']; ?></option><?php }?></select></td><td id='quantity_td'><input name='quantity' class='quantity' type='text' style='width:35px' id='cost"+(numqty++)+"' /><input type='hidden' name='price_hf' id='cost"+(numprice++)+"'/></td><td id='amount_td'><input name='amount' id='cost"+(numamount++)+"' style='width:70px' type='text' value='3' disabled='disabled'/></td></tr>");
});

The problem come in when i try to manipulate these elements within the above appended rows.It simply does not listen to any event, click, change, etc. e.g

$("#additems_table input[type=text]").each(function(){
    $(this).change(function(){          
        alert("amount");
    });
})

I will really appreciate the help.

Upvotes: 0

Views: 261

Answers (1)

bleepzter
bleepzter

Reputation: 9985

ok, to wire up the new input elements do something along the lines of:

$(function(){

    $('#additems_table input[type="text"]').live('change', function(){

    });
});

What that means is: on load create a global handler for the change event of all elements that are inside the #additems_table. The live method makes it possible to create new elements (input textboxes) on the fly without having to worry about their event registration. The change event of the newly appended elements will fire and will be handled automatically.

Upvotes: 1

Related Questions