Доступ к HTML-элементу, вставленному через другой скрипт - PullRequest
Новая
       6

Доступ к HTML-элементу, вставленному через другой скрипт

0 голосов
/ 02 мая 2018

Я работаю над графическим интерфейсом благодаря BABYLONjs, и я решил реализовать функцию выбора режима, то есть вы можете выбрать режим редактирования или режим визуализации. Каждый из этих двух режимов имеет разные компоненты HTML, поэтому я решил написать сценарий конструирования, который бы создавал HTML, реализуя правильные элементы, соответствующие выбранному режиму. Давайте назовем A.js строительным скриптом, а B.js моим основным скриптом со всеми моими функциями.

Когда я в B.js пытаюсь получить элемент HTML, например кнопку, которая была вставлена ​​через A.js, возвращаемое значение равно null (я получаю элемент с document.getELementById ( 'элемент').

Я включил A.js перед B.js в мой HTML, поэтому я не совсем понимаю, почему он не работает.

Если вам нужно больше точности, не стесняйтесь спрашивать. Спасибо !

Ответы [ 3 ]

0 голосов
/ 02 мая 2018

Вот пример того, что я хочу сделать:

HTML: 

 <!DOCTYPE html>
<html>

<head>
<title> Test </title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>
<body id=inserthere>
  <header> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- <script style="text/javascript" src="a.js" defer></script> --> 
      <!-- <script style="text/javascript" src="b.js" defer></script> -->
   <header>
</body> 
</html>

A.js: 

function construction(){

$("#inserthere").append("<button id='testone' class='btn'> 1 </button>");
$("#inserthere").append("<button id='testtwo' class='btn'  > 2</button>");

}

window.addEventListener("load", construction);

B.js: 

var test1 = document.getElementById("testone");
test1.addEventListener("click", function(){
alert("clicked");
});

var test2 = document.getElementById("testtwo");
test2.addEventListener("dblclick", function(){
alert("doubleclicked");
})

Это короткие примеры, которые пытаются воспроизвести мою ситуацию, надеюсь, она вам поможет!

0 голосов
/ 02 мая 2018

Я вижу, что вы используете jQuery. Если вы хотите захватывать события в динамически создаваемых элементах, вам следует привязать родительский элемент (или документ): 

$(document).ready(function() {
   $(document).on("click","#testone",function() {
       alert("clicked");
   });
}
0 голосов
/ 02 мая 2018

Убедитесь, что оба javascript-документа прикреплены к одному и тому же HTML-файлу, так что document относится к одной и той же вещи.

Также убедитесь, что все, что вы делаете, синхронно. Если вы используете, например, window.addEventListener('onload'), то это асинхронно. Это означает, что этот код на самом деле не запускается, а немного ждет своего запуска. Тем временем он может решить запустить ваш код B.js, и в этот момент выбранный вами элемент еще не существует.

Если это проблема, запустите скрипт B.js внутри window.addEventListener('onload').

В-третьих, ваш скрипт A.js может находиться внутри функции, которую необходимо запустить для добавления элемента в DOM.

Без реального кода действительно сложно отладить конкретные проблемы, подобные той, которую вы представили. Если вам нужны более точные ответы, пожалуйста, включите демонстрационный код, чтобы мы могли лучше определить проблему.

Редактировать: Код опубликован.

Как вы указали в своем коде, вы определяете функцию построения, а затем сообщаете броузеру, чтобы она запускалась при загрузке окна. Затем вы запускаете A.js до вызова функции построения. Есть два решения.

Оберните весь свой B.js в window.addEventListener("load") или сделайте что-то совершенно другое.

Включите B.js ДО A.js и определите функцию с именем B (). Поместите весь свой код в это. Затем в конце построения вызов функции B (). Это означает, что B.js также будет вынужден ждать, пока окно загрузится. Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...