使用 jQuery 以编程方式添加事件时，不会在输入上触发事件

Question

您好 StackOverflow，

我想知道是否有办法在使用 jQuery 以编程方式添加控件（在本例中为输入文本框）后触发事件。我的意思是，我在表中使用 jQUery.after() 添加了一行填充 s 和输入的表，并且该新行中的控件不会触发任何事件。

我真的需要这方面的帮助，经过大量“谷歌搜索”后我无法弄清楚，我不能再为此挣扎了。一些帮助将非常感激。

如果还不够清楚，请不要介意提出任何问题以使其更清楚。

编辑（这是我添加行的操作）

$(".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++;
                        }
                    });
            });

这是 addProductRow 函数

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;

}

预期的结果是新行可以在其“prodNum”输入上使用“change”事件。

谢谢你，

PBaller

Answer 1

尝试使用 live 而不是 bind -
请注意，在 jQuery 1.7 中，.live() 方法已被弃用。
因此，如果您使用 jQuery 1.7 或更高版本，请使用 .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());
});