jQuery script not working after appending dynamic values

Question

I am appending values from an array of objects to a div tag. The append just works fine, but the click event on the appended HTML elements are not working

let lists = [{name : "one", desc : "test"}, {name : "two", desc : "desc"}]   
 for(let a in lists) 
                $('#list').append('<div class="listing"><li id="' + lists[a].name +'" data-list-name="'+ lists[a].name +'"><h3>'+lists[a].name +'</h3></li><span class="view-more"></span><div class="view-more-container"><p class="list-text"><b>'+lists[a].desc +'</b></p></div></div>');

Here the value is appended as expected but click function on the class view-more is not working after appending. it works for direct values and doesn't work for appended one

I think the code has typo, for(let item in a) , you don;t have lists — Bharat, Jul 26 '21 at 09:55
`lists` is undefined, and you have two different `let a` that conflict with each other... — Jeremy Thille, Jul 26 '21 at 09:55
it was a typo. I corrected thanks. I will go through the link — , Jul 26 '21 at 09:59

score 0 · Answer 1 · answered Jul 26 '21 at 09:56

Small error in variable declaration, name is missing

 let lists = [{name : "one", desc : "test"}, {name : "two", desc : "desc"}]   
     for(let a in lists) 
        $('#list').append('<div class="listing"><li id="' + lists[a].name +'" data-list-name="'+ lists[a].name +'"><h3>'+lists[a].name +'</h3></li><span class="view-more"></span><div class="view-more-container"><p class="list-text"><b>'+lists[a].desc +'</b></p></div></div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="list">
</div>

Yeah, it was typo. I missed to note. Thanks. – Jul 26 '21 at 10:00 — , Jul 26 '21 at 10:00

jQuery script not working after appending dynamic values

1 Answers1