Выберите динамически созданные элементы в JavaScript - PullRequest
Новая
       28

Выберите динамически созданные элементы в JavaScript

0 голосов
/ 09 мая 2019

Я разрабатываю простой проект с использованием Electronjs, моя цель - обнаружить подключенные к моей локальной сети с помощью многоадресной передачи, загрузить их в мое электронное окно и выбрать один из них (по IP).Многоадресная часть в значительной степени сделана, и устройства загружаются правильно, используя шаблон руля (я впервые использовал руль и манипулирование DOM).

Моя проблема в том, что я не знаю, как выбрать IP (потому что мне действительно нужно связать угловой проект с этим IP) из текущего шаблона, который я использую.Кнопка SELECT AS SOURCE NODE может, возможно, выполнить функцию, которой я могу передать полученный IP-адрес из метки, или любой другой способ получить IP-адрес для этого экземпляра шаблона.

html template 

<!--Where the devices will be rendered-->
  <div class="row" id="nodes">

  </div>

   <script id="entry-template" type="text/x-handlebars-template">
                <div class="col-xs-4 p-2">
                    <div class="card text-center">
                        <div class="card-header">
                            <h5 class="card-title">Node: {{counter}}</h5>
                        </div>
                        <div class="card-body">
                            <label id="labelIP">
                         {{nodo}}</label>
                            <hr>
                        </div>
                        <div class="card-footer">
                            <button id="btnSelect" class="btn btn-danger btn-sm">
                            SELECT AS SOURCE NODE
                          </button>
                        </div>
                    </div>
                </div>
            </script>

ipNodes - это то, где ip каждого устройства отправляется при получении многоадресного сообщения.

Функция NodeJS, которая добавляет каждое устройство / узел, полученный многоадресной передачей 


var addNode = function() {

    /* Using a simple list I am able to retrieve the Ip

     var listitem = document.createElement('li');
     listitem.className = 'dynamic-link';
     listitem.innerHTML = ipNodes.slice(-1).pop();
     listitem.onclick = dynamicEvent;
     list.appendChild(listitem);*/

    const nodes = document.querySelector('#nodes');
    var source = document.getElementById("entry-template").innerHTML;
    var template = handlebars.compile(source);

    var context = { nodo: ipNodes.slice(-1).pop(), counter: counterList };
    nodes.innerHTML += template(context);

    counterList++;

}

Дело в том, что я хочу получить каждый динамически созданный IP-адрес из каждой метки.Привыкнув к угловым директивам и двустороннему связыванию данных, я даже не знаю, возможен ли такой подход.

Визуальное представление для уточнения:

nodes dom

Ответы [ 2 ]

0 голосов
/ 09 мая 2019

Решили изменить подход на что-то более простое, например, выбрать. 

<div class="selectArea">

            <form id="myForm">
                <div class="form-group">
                    <select class="form-control" id="selectNumber">
                        <option>Choose a node</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="nodesArea" id="nodes">
            <label id="labelListen"></label>


        </div>
    </div>

    <script id="entry-template" type="text/x-handlebars-template">
        <div class="col-xs-4 p-2">
            <div class="card text-center">
                <div class="card-header">
                    <h5 class="card-title">Node: {{counter}}</h5>
                </div>
                <div class="card-body">
                    <label id="labelIP">
                 {{nodo}}</label>
                    <hr>
                </div>
            </div>
        </div>
    </script>



var select = document.querySelector('#selectNumber');
select.addEventListener('change', (event) => {

    console.log(event.target.value);
    /*const result = document.querySelector('.result');
    result.textContent = `You like ${event.target.value}`;*/
});


var addNode = async function() {

    const nodes = document.querySelector('#nodes');

    var opt = ipNodes.slice(-1).pop();
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);




    var source = document.getElementById("entry-template").innerHTML;

    var template = handlebars.compile(source);

    var context = { nodo: opt, counter: counterList };

    nodes.innerHTML += template(context);

    counterList++;

}
0 голосов
/ 09 мая 2019

Пожалуйста, попробуйте это. Я использую jQuery в своем ответе. Я не проверял, работает ли он или нет. 

$("#nodes").on("click",".btn-danger", function() {
console.log("IP selected = ", $(this).closest(".card").find("#labelIP").text());
});

Если вы хотите добавить событие к динамически добавленному элементу, вы можете использовать функцию jQuery .on().

...