CODEWITHSUNDEEP
javascriptjqueryhtml
Ram
Ram

Reputation: 748

Dynamically added child element's event listener tagged to Parent also

I am adding buttons to HTML dynamically using JQuery. I have events that need to be added to the dynamically added buttons. However, I don't want the same event getting triggered when the parent div of the buttons are clicked..

has the code i have currently..

var buttons = (function() {

  var categories = ["cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens"];

  var addButtons = function() {

    for (var i = 0; i < categories.length; i++) {
      var btn = $("<button>");
      btn.attr("id", "btn-" + i);
      btn.addClass("btn btn-primary categories");
      btn.text(categories[i]);
      $("#btnSection").append(btn);
    }

  };

  var addEventListeners = function() {
    $("#btnSection").on("click", function(e) {
      e.stopPropagation();
    });
    $("#btnSection").on("click", $("#btnSection .categories"), function(event) {
      event.stopPropagation();
      console.log(event.target.textContent);

      alert(event.target.textContent);
    });

  };

  return {
    addButtons: addButtons,
    addEventListeners: addEventListeners
  };
})();


buttons.addButtons();
h1 {
  text-align: center;
}

h1 {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;
}

div {
  font-family: 'Cinzel', serif;
  /* font-size: 24px; */
  font-weight: 400;
  border: red solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="btnSection">
</div>

When you click on the buttons - you should get an alert with the animal name in the current button - This is desired behavior

However - when you click on the white space inside the red box - you should not get an alert.. I am looking to stop that somehow../

Any help is greatly appreciated..

Upvotes: 0

Views: 46

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65796

Your second argument to the JQuery .on() method was incorrect. It needs to be a valid selector, not a JQuery object.

You also had:

$("#btnSection").on("click", function(e) {
  e.stopPropagation();
});

which doesn't seem relevant to your operation.

Also, you need to invoke the buttons.addEventListeners() method.

var buttons = (function() {

  var categories = ["cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", 
                    "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", 
                    "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", 
                    "lions", "pigs", "goats", "chickens"];

  var addButtons = function() {
    for (var i = 0; i < categories.length; i++) {
      var btn = $("<button>");
      btn.attr("id", "btn-" + i);
      btn.addClass("btn btn-primary categories");
      btn.text(categories[i]);
      $("#btnSection").append(btn);
    }
  };

  var addEventListeners = function() {
    // The second argument here needs to be a valid CSS selector
    $("#btnSection").on("click", "button.categories", function(event) {
      event.stopPropagation();
      console.log($(this).text()); // Adjusted to the JQuery syntax since you are using JQuery
    });
  };

  return {
    addButtons: addButtons,
    addEventListeners: addEventListeners
  };
})();

buttons.addButtons();
buttons.addEventListeners(); // You didn't have this call!
h1 { text-align: center; }

h1 {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;
}

div {
  font-family: 'Cinzel', serif;
  /* font-size: 24px; */
  font-weight: 400;
  border: red solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="btnSection"></div>

Upvotes: 2

Related Questions