Событие не срабатывает на входе, когда оно добавлено программно с использованием jQuery

Question

Hello StackOverflow,

Я хотел бы знать, есть ли способ вызвать событие после того, как элемент управления (в данном случае текстовое поле ввода) был добавлен программно с использованием jQuery.Я имею в виду, что я добавил строку, заполненную s и входами в таблицу, используя jQUery.after () в таблице, и элементы управления в этой новой строке не будут вызывать никаких событий.

Мне действительно нужна помощь в этом, я не мог понять это после большого количества "поиска в Google", и я больше не могу бороться с этим.Некоторая помощь будет очень признательна.

Если она недостаточно ясна, не стесняйтесь задавать какие-либо вопросы, чтобы прояснить ее.

РЕДАКТИРОВАТЬ (вот что я делаю, чтобы добавить строку)

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

}

Ожидаемый результат состоит в том, что новая строка может использовать событие "change" в своем "prodNum"вход.

Спасибо,

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