Javascript. function is not working in .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"
    });

Problem: So first I pull data and put in 3 variables, companyname, picture and address. i have x sets of these data. i want to put in a list form. i am able to list out, but the function doesn't recognise the id and it does not work. please help. ty

replace `$("#salon1")` with `$("#salon"+(i + 1))` cause your `id` should be unique on single page — PHP Ninja, Sep 26 '19 at 06:14
the binding of the button is outside the loop. it doesnt work this way. i feel the problem is in the append. when i created this id, DOM tree does not recognize it — powerpuff, Sep 26 '19 at 06:27

Saharsh · Accepted Answer · 2019-09-26T06:40:05.950

This is because #salon1 element is being created dynamically. Moreover, .bind() in JQuery is deprecated. For such cases you should use .on()

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

More at jQuery click not working for dynamically created items

Proof of work

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>

nope it does not work. i personally feel the problem is coming from the append. something to do with the id not being recognised. — powerpuff, Sep 26 '19 at 06:28
@Jason seems to be working fine for me. I have updated answer with a proof of work. — Saharsh, Sep 26 '19 at 06:40
Tyvm. it works better when i use Sergio answer(the comment above urs). He/She uses document.createElement which i think is a better solution. I used ur code for the buttons, it helps to differentiate which buttons is which. Ur time spent here is appreciated. Once again ty :) — powerpuff, Sep 26 '19 at 07:41

score 1 · Answer 2 · answered Sep 26 '19 at 06:31

To add event listeners to dynamically created objects, you need to create DOM objects using document.createElement. This lets you hold to the actual element even before appending it.

Then, you can use it like you would use any other object retrieved using a query string.

$(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 styles are just for clarity.

Yea this works. Tyvm. and to differentiate the button i clicked i used the code provided by Saharsh(the comment below urs). Rly appreciate ur time to help me! — powerpuff, Sep 26 '19 at 07:37
You're welcome. Be careful when adding event listeners inside of loops, because they are cumulative and you could end up running the same function hundreds of times. — Sergio, Sep 27 '19 at 09:20

PHP Ninja · Answer 3 · 2019-09-26T06:44:35.910

0

Here is a sample. .bind() in JQuery is deprecated. For such cases, you should use .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>

You were defining your click function outside for loop. That's why DOM didn't recognize your id

edited Sep 26 '19 at 06:44

answered Sep 26 '19 at 06:34

PHP Ninja

1,055
2
9
28

I would not advise that you use `.bind` since that has been removed from jquery since v 3., Use `.on()` – Carsten Løvbo Andersen Sep 26 '19 at 06:40
I missed this inflow to solve the issue. let me add it – PHP Ninja Sep 26 '19 at 06:44

Javascript. function is not working in .append

3 Answers3