селектор класса не работает после добавления (JQuery)

Question

$(".quantidade").on("change blur", function() { 
     if ($(this).val().length) { 
      validateField("quantidade"); 
     } else { 
      invalidateField("quantidade"); 
      showGeneralMessage("É necessário preencher a quantidade!", "danger"); 
     } 
    }); 

Он работает просто отлично, пока новый элемент не добавляются с Append:

$(".btn-add-produto").click(function() { 
    ... 
    $("#listaProdutosPedido").append(content); 
    ... 
}); 

Это «содержание» включает в себя вход с тем же классом. После добавления этой части html селектор классов к нему не применяется. Я предполагаю, что это происходит, потому что, когда документ готов, эта часть HTML не существует. Как «перезагрузить» javascript/документ, чтобы селектор работал даже с будущими ссылками? Я попытался проверить с помощью setInterval(), но он не работает также ...

Answer 1

Необходимо использовать .on() делегированный синтаксис события. В деле делегирования вы присоединяете событие к родительскому элементу. Внутри jQuery полагается на способность событий пузырить дерево DOM. Когда будет найдено событие указанного типа с свойством e.target, соответствующим вашему делегированному селектору, ваше событие будет запущено.

Для размещения этого изменения, изменить код следующим образом:

$(document).on("change blur", ".quantidade", function() { 
    if ($(this).val().length) { 
     validateField("quantidade"); 
    } else { 
     invalidateField("quantidade"); 
     showGeneralMessage("É necessário preencher a quantidade!", "danger"); 
    } 
}); 

Обратите внимание, делегируя на этом максимуме уровня крайне неэффективно. document следует изменить для ближайшего родительского элемента, который содержит недавно добавленный контент. В этом случае я использовал его, чтобы продемонстрировать, как происходит процесс, потому что в вашем вопросе не было данных дерева HTML DOM. Внедряя это в свою систему, я рекомендую вам соответственно обновить селектор document.