Javascript.функция не работает в .append

Question

HTML.

<div id="listsalon">
   <ul data-role="listview" data-inset="true" data-filter="true" >

   </ul>
</div>

JS.

for (var i = 0; i < arr.length; i++) {

   companyname = arr[i].CompanyName;

   picture = arr[i].Picture;

   address = arr[i].Address;

   $("#listsalon ul").append("<li class='ui-corner-all'>" + 
                        "<a id=" + '"' + "salon" + (i + 1) + '"' + "><img src='" + picture +           
                        "'style='height:160px; width:200px;' class='ui-corner-all'>" +
                        "<h2 style='font-size:13px'>" + companyname + "</h2>" +
                        "<p style='font-size:10px'>" + address + "</p>" +
                       "</a></li>");
                }

    $("#salon1").bind("click", function () {
        window.location = "salon.html"
    });

Проблема: Итак, сначала я извлекаю данные и вставляю 3 переменные, название компании, изображение и адрес.у меня есть x наборов этих данных.Я хочу поставить в форме списка.Я могу перечислить, но функция не распознает идентификатор и не работает.пожалуйста помоги.ти

Answer 1

Чтобы добавить прослушиватели событий к динамически создаваемым объектам, вам нужно создать объекты DOM, используя document.createElement.Это позволяет удерживать фактический элемент даже до его добавления.

Затем вы можете использовать его так же, как и любой другой объект, полученный с помощью строки запроса.

$(document).ready(function() {
  let array = ["a", "b", "c"];
  
  for (let i = 0; i < array.length; i++) {
    let el = document.createElement('li');
    $(el).html(array[i]);
    
    $(el).on('click', function() {
      alert('Click!');
    });
    
    $("#listsalon ul").append(el);
  }
});

#listsalon ul li {
  background-color: #eee;
  padding: 0.5em;
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listsalon">
   <ul data-role="listview" data-inset="true" data-filter="true" >
   </ul>
</div>

Стили CSS только для наглядности.

Answer 2

Вот пример..bind() в JQuery - это deprecated.Для таких случаев вы должны использовать .on()

for (var i = 0; i < 5; i++) {
   $("#listsalon ul").append("<li class='ui-corner-all'>" + 
      "<a id=" + '"' + "salon" + (i + 1) + '"' + ">"+(i + 1)+"</a></li>");
    $("#salon"+(i + 1)).on("click", function () {
        alert('clicked')
    });
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listsalon">
<ul>

</ul>
</div>

Вы определяли свою функцию click вне for loop.Вот почему DOM не узнал ваш id

Answer 3

Это потому, что #salon1 элемент создается динамически.Более того, .bind() в JQuery устарело.Для таких случаев вы должны использовать .on()

$("#listsalon").on("click", "a#salon1", function () {
    window.location = "salon.html"
});

Больше на jКук-клик не работает для динамически создаваемых элементов

Подтверждение работы

var arr = [{"CompanyName": "A", "Picture": "https://via.placeholder.com/140x100", "Address": 1}, {"CompanyName": "B", "Picture": "https://via.placeholder.com/140x100", "Address": 2}];

for (var i = 0; i < arr.length; i++) {
  var companyname = arr[i].CompanyName;
  var picture = arr[i].Picture;
  var address = arr[i].Address;
  $("#listsalon ul").append("<li class='ui-corner-all'>" + 
                            "<a href='#' id=" + '"' + "salon" + (i + 1) + '"' + "><img src='" + picture +           
                            "'style='height:160px; width:200px;' class='ui-corner-all'>" +
                            "<h2 style='font-size:13px'>" + companyname + "</h2>" +
                            "<p style='font-size:10px'>" + address + "</p>" +
                            "</a></li>");
   $("#listsalon").on("click", "a#salon"+(i+1), function () {
      alert("Redirecting...");
      window.location = "salon.html"
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listsalon">
   <ul data-role="listview" data-inset="true" data-filter="true" ></ul>
</div>