Using click events on dynamically added DOM elements

Question

Question: Why does it work when element is hard-coded into HTML but does not work when added dynamically via Jquery?

I am teaching my self Jquery within my self learning of javascript, and I am just creating a simple troubleshooting assistant app for the sake of learning. I actually have my code posted here: https://repl.it/@jllrk1/OrganicBothRay.

The way I have it set up so far is the user clicks on the header block to begin, which is set up with a onetime click function to create a UL for some products at my job in which we provide IT Service.

I then am trying to be able to click each product in that list to pull troubleshooting walkthroughs for that specific product (it will guide the user based on what they click or enter).

For testing purposes I just tried having the background of the list item in which is clicked to change to red.

I cannot get this to work, or my console.log to fire telling me that the function is not getting called.

however, if I hard code in the ul into the html, using the same code for the click events, it works just fine.

Am I doing something wrong?

Just looking to gain a better understanding!

$(function () {
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//set up variables
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//var $liItems = $('.product li');
var $chief = $(".chiefblock");
var $container = $("#container");
var $this = $(this);
var $error = '';



var initList = function () {
  console.log("initList initiated");

        $container.append('<div class="product"><ul><li>TASC</li><li>TABE</li><li>Las Links</li><li>TerraNova</li><li>E-Direct</li></ul></div>'); 
    $("p").text("Start by selecting a product");

}


var navItems = function (event){
      console.log("navItems initiated");
      var target = $(event.target);
          if (target.is("li") ) {
            target.css("background-color", "red" );
          }



}       
var nObject = function () {
        $container.append('<div id = "tasc"><h2>Tasc</h2><p></p></div></div>');
    $('#newItem').prepend('<h2>Item</h2>');




}


$('.chiefblock').one('click', initList)
    //$('li').on('click', navItems) this i tried and does not work
$('#newObject').on('click', nObject)
$('ul').on('click', navItems)
//$liItems.on('click', navItems)this i tried and does not work


});

$(function () { ... is the equivalent of onReady or onLoad which only fires at the start of your page load and looks for items available at that time. Since your added items are non-existent at that time, your event does not fire for your new items. — Canica
– Canica, Commented Feb 6, 2019 at 21:03
The link @Mohamed-Yousef shared sums it up. You essentially need to listen to the document for events on dynamically added elements. $(document).on('click', '#identifier', function() {}); for example =) — PsychoMantis
– PsychoMantis, Commented Feb 6, 2019 at 21:13
Possible duplicate of Event binding on dynamically created elements? — Adam
– Adam, Commented Feb 6, 2019 at 21:21
thank you jcruz and psycho mantis for the specific explanation. I am now am able to have my function fire if I have the $(document) set to a specific div, but still am not able to have it fire upon clicking an individual list item, any suggestions? (I looked through the links posted and couldn't resolve my question) — Joel Lark
– Joel Lark, Commented Feb 6, 2019 at 21:52

cb64 · Accepted Answer · 2019-02-06 21:19:03Z

1

for dynamically added DOM elements use

$(document).on('click', '#element', function() {
    console.log($(this))
})

answered Feb 6, 2019 at 21:19

cb64

8558 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Using click events on dynamically added DOM elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related