How to add classes in jQuery to elements added in JavaScript

What should I do if I click on the added element after adding the element in JavaScript and jQuery gives me a class?
I'm having a hard time because the following code doesn't work.

HTML

<h1>Test</h1>
<divid="test"></div>

JavaScript & jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
(function(){
  'use strict';

    function show() {
    var div_element= document.createElement("div");
    div_element.id = "hogehoge";
    div_element.innerHTML = 'Aye';
    var parent_object = document.getElementById('test');
    parent_object.appendChild(div_element);
  }

  addEventListener('load', function(){
    show();
  });

  $("#hogehoge").on("click", function(){
  $("#hogehoge").toggleClass("hogehoge";
  });

})();
</script>

javascript jquery

2022-09-30 16:34

3 Answers

This is probably due to the absence of "#hogehoge" (the element shown in ) when .on is running.

I think the following is fine with jQuery.

<script>
$(function(){
    'use strict';

    $("#test").append("<divid='hogehoge'>Aiueo</div>";
    $("#hogehoge").on("click", function(){
        $("#hogehoge").toggleClass("hogehoge";
    });
});
</script>

2022-09-30 16:34

The order in which the action was performed is incorrect.

The window.onload event registered with addEventListener occurs when all images and other resources referenced from the HTML are read.In contrast,

$("#hogehoge").on("click", function(){
$("#hogehoge").toggleClass("hogehoge";
});

Because this statement is executed on a normal call in the <script> tag, HTML is parsed from top to bottom and executed when the tag is loaded.Therefore, window.onload has not occurred at this time, and no element matches #hogehoge.

So do the action immediately after show(), or use jQuery.on overload to

$(document).on("click", "#hogehoge", function(){
    $("#hogehoge").toggleClass("hogehoge";
});

You must call jQuery.on by specifying the "#hogehoge" selector for and the parent element that exists at that time.

2022-09-30 16:34

Has it been resolved?
I made a snippet quickly, so please check it out.
クラス In order to visually confirm that a class has been added, I have colored it with CSS.

$(function(){
  'use strict';

  function show() {
    vardiv_element= document.createElement('div');
    div_element.id='hogehoge';
    div_element.innerHTML = 'Aye';
    var parent_object = document.getElementById('test');
    parent_object.appendChild(div_element);
  }
 
  // You must use on() for dynamically added DOMs.
  $(document).on('click', '#hogehoge', function(){
    $('#hogehoge').toggleClass('hogehoge');
  });

  show();

});

.hogehoge{
  color:red;
}

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='content-type'content='text/html;charset=utf-8'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <title>toggleClass</title>
  </head>
  <body>
    <divid='test'></div>
  </body>
</html>

2022-09-30 16:34

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656