Bind onclick event dynamically using javascript

Question

I have the below JS code

for(var i=0;i<resultData.length;i++) {
    var id = "" + counter + "_" + resultData[i].id;
    var action = resultData[i].action;
    str += "<li id=" + id + "><div id=div_" + id + "><img src='assets/img/plus.png' id='img_" + id + "' onclick=getSubDirs('" + id +"', '" + action +"') /><label id=label_"+ id +" onclick=clickedDir('"+ id + "')>"+ resultData[i].label + "</label>" +"<span style='display:none' id=path_"+ id +">"+ resultData[i].path +"</span></div></li>";
    counter++;
}

The above code generates a dynamic list and I'm adding it to ul.

<li id="id_1_abc">
    <div id="div_id_1_abc">
        <img src="assets/img/plus.png" id="img_id_1_abc" onclick="getSubDirs('id_1_abc'," 'job')="">
        <label id="label_id_1_abc" onclick="clickedDir('id_1_abc')">abc</label>
        <span style="display:none" id="path_id_1_abc">/abc</span>
   </div>
</li>

The above is the generated list. But my onlick changes to onclick="getSubDirs('id_1_abc'," 'job')=""

try use \" as str += "<li onclick="\func('" + var + "')"\></li>" — Haidangdevhaui
– Haidangdevhaui, Commented Oct 26, 2018 at 5:02

Keenan Villani-Holland · Accepted Answer · 2018-10-26 05:10:12Z

1

Using backticks will make this way more readable. Your problem is that you need to wrap the onclick handler in quotes:

str += `<li id="${id}"><div id="div_${id}"><img src='assets/img/plus.png' id="img_${id}" onclick="getSubDirs('${id}', '${action}') />...`

answered Oct 26, 2018 at 5:10

Keenan Villani-Holland

362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Julius Limson · Accepted Answer · 2018-10-26 05:15:23Z

0

Could be duplicated to Event handler not working on dynamic content

use jquery .on function

<ul id="someidname">
  **dynamic content **
  <li class="someclassname" id="id_1_abc">
    <div id="div_id_1_abc">
        <img src="assets/img/plus.png" id="img_id_1_abc" >
        <label id="label_id_1_abc" >abc</label>
        <span style="display:none" id="path_id_1_abc">/abc</span>
   </div>
</li>
</ul>

on your js

$("#someidname").on('click','.someclassname', function(){
// yourfunctions ..
// clickedDir()
// getSubDirs()
})

edited Oct 26, 2018 at 5:15

answered Oct 26, 2018 at 5:08

Julius Limson

52611 silver badges31 bronze badges

Collectives™ on Stack Overflow

Bind onclick event dynamically using javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related