Event doesn't trigger on an input when its added programmatically using jQuery

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

Can you post some example code or use jsfiddle.net to set up an example? It sounds like you're not binding to the events after you create the new row. — SoWeLie
– SoWeLie, Commented Jan 25, 2012 at 23:08
If you are using jQuery 1.7+ use on. If not, use delegate. This is the third (at least) question that has been asked about this in the last hour alone. — James Allardice
– James Allardice, Commented Jan 25, 2012 at 23:09
SoWeLie This is exactly what happens. I can't bind my event to the input after its creation. And still don't know how. I tried @Ghommey solution, but it doesn't work either. Some help would still be greatful. — PBaller_91
– PBaller_91, Commented Feb 1, 2012 at 20:38

jantimon · Accepted Answer · 2012-01-25 23:10:52Z

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

answered Jan 25, 2012 at 23:10

jantimon

38.5k23 gold badges127 silver badges195 bronze badges

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

1 Comment

PBaller_91 Over a year ago

Sorry for the time it tooks for me to answer, but this solution isn't working for my issue. I'm sure it actually works for anything else. Thanks for your help though. I'll provide a code snippet for further help.

Collectives™ on Stack Overflow

Event doesn't trigger on an input when its added programmatically using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related