Как добавить код и заставить его работать с уже загруженным js?

Question

Простой пример того, чего я пытаюсь достичь:

$('.test-link').click(function(e) {
  e.preventDefault();
  alert($(this).attr('href'));
});
$('.test-form').submit(function(e) {
  e.preventDefault();
  $(this).append('<a href="testing" class="test-link">Click here</a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="test-form">
  <input type="submit">
</form>

Когда форма отправлена, она успешно создает ссылку с классом «test-link», в которой есть функция, готовая обрабатывать щелчок.При нажатии мне нужно активировать существующую функцию, в этом примере она должна предупреждать «тестирование», но ссылка работает как обычная ссылка.

Answer 1

Подумайте об использовании метода .on() в jQuery, чтобы убедиться, что ваша логика событий связана с элементами, которые будут добавлены в DOM в будущем.

Например, вы можете изменить свой код следующим образом:

$(function() {

$('.test-form').submit(function(e) {
  e.preventDefault();
  $(this).append('<a href="testing" class="test-link">Click here</a>');
});
  
$('body').on('click', '.test-link', function(e) {

  e.preventDefault();
  alert($(this).attr('href'));
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form class="test-form">
  <input type="submit">
</form>

Это означает, что ваш обработчик click будет вызываться для любых соответствующих элементов, которые существуют в настоящее время или добавляются позже (т.е. после отправки формы).

Для получения дополнительной информации см. Документацию для on().Надеюсь, это поможет!