Работа с элементами внутри динамически загруженного <div>

Question

На странице отображения я загружаю содержимое в контейнер div с помощью ("#mydiv"). Load ("myphpfile. php"); Это отлично работает. У меня вопрос, как мне работать с элементами внутри этого загруженного div?

Вот пример кода:

<div id="contents"></div>

<script type="text/javascript">
  $("#contents").load("___server_side.php");
  $("#message").click(function(){
    console.log('clicked');
  });
</script>

"# message" - это элемент в загруженном div. Как мне получить к нему доступ и назначить ему функции со страницы дисплея?

Answer 1

Вы можете использовать свой код как есть, но я бы добавил .ready().

<div id="contents"></div>

<script type="text/javascript">
  $("#contents").load("___server_side.php");
  $("#message").ready(function(){
    $(this).click(function(){
      console.log('clicked');
    });
  });
</script>

Другой вариант - добавить обратный вызов события после завершения загрузки.

<div id="contents"></div>

<script type="text/javascript">
  $("#contents").load("___server_side.php", function(){
    $("#message", this).click(function(){
      console.log('clicked');
    });
  });
</script>

В противном случае я бы использовал опцию .on().

<script type="text/javascript">
  $("#contents").on("click", "#message", function(){
    console.log('clicked');
  });
  $("#contents").load("___server_side.php");
</script>

<div id="contents"></div>

См. Подробнее:

• https://api.jquery.com/load/
• https://api.jquery.com/on/