3

I have a 'div' element generated in javascript with 'innerHTML' property.

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';

Anyway onclick event is not working.

document.getElementById('a').onclick = function() {
    //do something
}

What is the problem? How do I resolve it (pure javascript, no libraries)?

5
  • OFF: No need to escape " quotes here.
    – VisioN
    Aug 7, 2015 at 11:31
  • 1
    Are you sure that you are registering the listener after creating the div? Aug 7, 2015 at 11:31
  • why not setting the onclick event when generating the div ?
    – bloC
    Aug 7, 2015 at 11:33
  • You could create element using native browser DOM manipulation functions, and then attach an event listener to the DOM object reference in your js
    – Nillus
    Aug 7, 2015 at 11:36
  • Hello and welcome to Stack Overflow! It works quite fine for me: jsfiddle.net/17z6ed19 For this problem to be solvable you need to provide a minimal, complete and verifiable example. The code you provided is not one, since we can not simply copy paste it and run to reproduce the problem.
    – Anders
    Aug 7, 2015 at 11:36

7 Answers 7

4

You need to bind that id with the function after you added the the innerhtml to the outer html

function bindingFunction(){
    document.getElementById('a').onclick = function() {
//     Your code
    }
}

Just after adding the innerHTML

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';
bindingFunction();

This will work.

2

You could delegate the event listening to the parent to which you are innerHTML-ing the div , in yout code indicated by (...). This would handle the events fired in the (...) and you can perform actions conditioned to event.target.id === 'a'

(...).onclick = function(event) {
    if (event.target.id === 'a') {
    //Do your stuff
    }
}

This way you not need to worry about if, when you attach the listener, you have already created the div dinamically or not. Also, to register the event handler, I suggest proper event handle registering (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

0

Please call this function :

document.getElementById('a').onclick = function() {
    //do something
}

Just after the

(...).innerHTML = 'sometext'+'<div id=\"a\">word</div>'+obj.something+'othertext';
0

Working Example:

Javascript Code

document.getElementById('resultDiv').innerHTML = '<div id=\"a\">Test onclick</div>';

document.getElementById('a').onclick = function() {
    alert("Click Event Fired !")
}

Demo for you: https://jsfiddle.net/be3a90gw/4/

0

Javascript - no libraries

var div = document.getElementById('1');
    
div.onclick = function(event) {
  if(div.innerHTML == 'Click here'){
    div.innerHTML = '<b>I like this!</b>';
  }else{
    div.innerHTML = 'Click here';
  }
}
    
<div id="1">Click here</div>

jQuery

var div = $('#1')

div.on('click',function(event){
  if(div.html() == 'Click me'){
    div.html('<b>I like this</b>');
  }else{
    div.html('Click me');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1">Click me</div>

0

You can use the onclick event directly in the innerHTML string, and I suggest you use template literals instead of single quotes

(...).innerHTML = `sometext <div id="a" onclick="someFunction('${data}')">word</div> ${obj.something} ${othertext}`;

You can pass dynamic or static data into the function. The example above passes dynamic data where data represents a variable. To pass static data just do so without the ${} eg

someFunction('data');
0
 <button onClick="
                document.querySelector('.tab.active').classList.remove('active'); 
                document.getElementById('${before}').classList.add('active')
            " class="ghost">
                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 11.1111H7.83L13.42 5.52108L12 4.11108L4 12.1111L12 20.1111L13.41 18.7011L7.83 13.1111H20V11.1111Z" fill="white"/>
                </svg>
            </button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.