Question

Hello StackOverflow,

I’d like to know if there is way to trigger an event after the control (in this case an input textbox) has been added programmatically using jQuery. What I mean is, I added a row filled with s and inputs to a table using jQUery.after() in a table and the controls in this new row won’t trigger any event.

I really need help on this one, I couldn’t figure it out after a lot of “googling” and I can’t struggle on that anymore. Some help would be really appreciated.

If it isn’t clear enough, don’t mind to ask any question to make it clearer.

EDIT (here’s what I do to add a row)

$(".prodNum").on("change", function(){
                //Envoie le sku du produit au serveur et affiche les infos lorsque le produit est valide
                $.post("../PHP/caisse.php", {productSku : $(this).val()}, 
                    function(data){
                        var total = 0;
                        var jsonObj = $.parseJSON(data);
                        var newRow = "";

                        if( typeof jsonObj.message !== "undefined")
                        {
                            alert(jsonObj.message);
                        }
                        else
                        {
                            total = jsonObj.price;

                            $("#desc" + numberOfProducts ).val(jsonObj.description);
                            $("#prix" + numberOfProducts ).val(roundToDecimals(jsonObj.price,2));
                            $("#qte" + numberOfProducts ).val(1);
                            $("#total" + numberOfProducts ).val(roundToDecimals(total,2)).change();

                            newRow = addProductRow(numberOfProducts);

                            $("#prod" + numberOfProducts ).after(newRow);

                            numberOfProducts++;
                        }
                    });
            });

And here’s addProductRow function

function addProductRow(numOfProd)
{
if( numOfProd % 2 == 0 )
{
    newRow = "<tr class=\"alternate1\" id=\"prod" + numOfProd + "\">";
}
else
{
    newRow = "<tr class=\"alternate2\">";
}

newRow += "<td><input type=\"text\" class=\"prodNum\" name=\"prodNum[]\" id = \"prodNum" + (numOfProd + 1) + "\" /></td>";
newRow += "<td class=\"middle\"><input type=\"text\" class=\"desc\" id=\"desc" + (numOfProd + 1) + "\" /></td>";
newRow += "<td class=\"middle\"><input type=\"text\" class=\"price\" id=\"prix" + (numOfProd + 1) + "\" /></td>";
newRow += "<td class=\"middle\"><input type=\"text\" class=\"qty\" id=\"qte" + (numOfProd + 1) + "\" /></td>"; 
newRow += "<td class=\"middle\"><input type=\"text\" class=\"total\" name=\"total[]\" id=\"total" + (numOfProd + 1) + "\" /></td></tr>";

return newRow;

}

The result expected is that the new row can use the “change” event on its “prodNum” input.

Thank you,

PBaller

Answer 1

Try live instead of bind –
Note that of jQuery 1.7, the .live() method is deprecated.
So if you are using jQuery 1.7 or later use .on() .

http://api.jquery.com/live/

 // jQuery 1.3+
 $("a.offsite").live("click", function(){ alert("Goodbye!"); });  

 // jQuery 1.4.3+              
 $(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); });  

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

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});