Trouble arises when attempting to bind a JavaScript event with an innerHTML DOM element

Question

Trouble arises when attempting to bind a JavaScript event with an innerHTML DOM element

I am currently dealing with a complex issue on how to bind a JavaScript event to an innerHTML DOM element. The scenario involves having a div with an input checkbox inside it, along with some pre-existing JavaScript event bound to that checkbox. Additionally, there is another div containing some text content. Now, through JavaScript, the goal is to create a new div where the content will be a combination of the existing two divs, while maintaining the JavaScript event for the checkbox.

While I have managed to achieve most of this task successfully, there's one challenge remaining. When transferring the checkbox from the previous div to the newly created div using innerHTML, the JavaScript event does not carry over.

The current HTML structure looks like this:

<div id="text_holder">
"Lubricant"
<input type="checkbox" id="Lubricantc" class="check_class">
</div>

<div id="text_holder2">
SKF,FAG
</div>

"text_holder" and "text_holder2" are the names of the two existing div elements.

The JavaScript code responsible for creating a new div, combining data from the previous divs, and placing it in the new div is as follows:

var previous_ig_content=document.getElementById("text_holder");
var previous_brand_content=document.getElementById("text_holder2");
var child_div=document.createElement('div');
child_div.id=ig_id+"div";
child_div.innerHTML=previous_ig_content.innerHTML+previous_brand_content.innerHTML;

I have conducted extensive research to solve this issue but haven't found a proper solution yet. Any assistance in resolving this matter would be greatly appreciated. Thank you in advance!

Below is my complete JavaScript code:

 <!-- Your JavaScript code goes here -->

javascript jquery html css dom

Answer 1

Answer №1

Give this a try! I've made a slight adjustment by replacing the checkbox with a button that triggers upon clicking. Feel free to switch it back to a checkbox if needed.

function checkFunc(){
    var previous_ig_content=document.getElementById("text_holder").innerHTML;
  var previous_brand_content=document.getElementById("text_holder2").innerHTML;
  var childDiv = document.createElement('div');
  childDiv.id="newDiv";
 childDiv.onclick =alertMess;
 childDiv.style.backgroundColor = "red";
 childDiv.style.cursor = "pointer";   childDiv.innerHTML=previous_ig_content+previous_brand_content;
  document.getElementsByTagName('body')[0].appendChild(childDiv);
}

function alertMess(){
  alert("oh! you clicked the generated div");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text_holder">
"Lubricant"
<!-- <input type="checkbox" id="Lubricantc" class="check_class" ></input> -->
<button onclick="checkFunc()">Click me</button>
</div>
<div id="text_holder2">
SKF,FAG
</div>

Answer 2

Give this a try! I've made a slight adjustment by replacing the checkbox with a button that triggers upon clicking. Feel free to switch it back to a checkbox if needed.

function checkFunc(){
    var previous_ig_content=document.getElementById("text_holder").innerHTML;
  var previous_brand_content=document.getElementById("text_holder2").innerHTML;
  var childDiv = document.createElement('div');
  childDiv.id="newDiv";
 childDiv.onclick =alertMess;
 childDiv.style.backgroundColor = "red";
 childDiv.style.cursor = "pointer";   childDiv.innerHTML=previous_ig_content+previous_brand_content;
  document.getElementsByTagName('body')[0].appendChild(childDiv);
}

function alertMess(){
  alert("oh! you clicked the generated div");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text_holder">
"Lubricant"
<!-- <input type="checkbox" id="Lubricantc" class="check_class" ></input> -->
<button onclick="checkFunc()">Click me</button>
</div>
<div id="text_holder2">
SKF,FAG
</div>

Answer 3

Answer №2

When using native JavaScript, you can utilize the innerHTML method or the cloneNode function. However, it's important to note that they only clone the inline listeners and not those added with the addEventListener method. See the demonstration below:

// checkbox listener
document.querySelectorAll('input[type=checkbox]')[0].addEventListener('click', function() {
  console.log("clicked");
});

// clone and append
document.body.appendChild(document.querySelectorAll('.wrapper')[0].cloneNode(true));

// inline listener
function inline() {
  console.log("inline");
}

.wrapper {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align: middle;
}

<div class="wrapper">
  <span>Yes / No</span>
  <input type="checkbox" onclick="inline()" />
</div>

Solution

If JQuery is used, there is a solution available - the clone method. By specifying true, event handlers are also copied! Explore the demo below:

$(function() {
  // checkbox listener
  $('input[type=checkbox]').on('click', function() {
    console.log("clicked");
  });
  // clone and append
  $('body').append($('.wrapper').clone(true));
});

// inline listener
function inline() {
  console.log("inline");
}

.wrapper {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span>Yes / No</span>
  <input type="checkbox" onclick="inline()" />
</div>

Answer 4

When using native JavaScript, you can utilize the innerHTML method or the cloneNode function. However, it's important to note that they only clone the inline listeners and not those added with the addEventListener method. See the demonstration below:

// checkbox listener
document.querySelectorAll('input[type=checkbox]')[0].addEventListener('click', function() {
  console.log("clicked");
});

// clone and append
document.body.appendChild(document.querySelectorAll('.wrapper')[0].cloneNode(true));

// inline listener
function inline() {
  console.log("inline");
}

.wrapper {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align: middle;
}

<div class="wrapper">
  <span>Yes / No</span>
  <input type="checkbox" onclick="inline()" />
</div>

Solution

If JQuery is used, there is a solution available - the clone method. By specifying true, event handlers are also copied! Explore the demo below:

$(function() {
  // checkbox listener
  $('input[type=checkbox]').on('click', function() {
    console.log("clicked");
  });
  // clone and append
  $('body').append($('.wrapper').clone(true));
});

// inline listener
function inline() {
  console.log("inline");
}

.wrapper {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span>Yes / No</span>
  <input type="checkbox" onclick="inline()" />
</div>

Trouble arises when attempting to bind a JavaScript event with an innerHTML DOM element

Answer №1

Answer №2

Similar questions

Unraveling the mysteries of deciphering extended JSON information

Navigating between divs with a 100% height using up and down movements

Extracting individual elements from an array with Node.js or JavaScript

Why isn't Bootstrap validation functioning properly in my Modal?

What methods can I utilize to persuade Internet Explorer to directly show the content of application/json instead of prompting to download it?

Zebra Calendar Alignment Problem

Utilizing 'this' in jQuery: Image swapping with thumbnails, Twitter Bootstrap framework

Tips for ensuring a static html element remains visible at the bottom of the screen even when the soft keyboard is opened in iOS Safari

Recursive sorting and parsing of JSON data with multiple levels

"Converting an object to a JSON string using URLSearchParams: A step-by

Tips for transferring an array from a php page to a javascript page

I'm noticing that the top border for my span is smaller than the bottom one. What could

Looking for a straightforward way to incorporate a "Read more" and "Show Less" functionality into a Wordpress site using Javascript?

What methods can I use to pass an argument from an HTML file to jQuery?

Tips for integrating tooltips in a dynamic highcharts chart

What is the best method for submitting information using AJAX and jQuery?

Sharing data between controllers within an MVC architecture in JavaScript

Steps for Creating an Animation Tool based on the Prototype:

Click on the button to sort Angular data

Notifying with Socket.IO in Node.js