CODEWITHSUNDEEP
javascripthtml
clestcruz
clestcruz

Reputation: 1111

On click does not trigger if clicking on a child element

I'm trying to figure out how I can trigger an action or event using on click if I'm clicking on a child element. Apparently the button works if I tried clicking on the parent, but if I tried clicking on the text within which is the child element. The action or event does not trigger.

Here is what the component looks like. Clicking on space around it which is the parent, the event works. But if I tried clicking on the text it doesn't work.

enter image description here

Here is what the markup looks like. 

    <div class="modal">
     <div class="view-types -bordered">
         <div class="view-type">
             <div class="view-switch-list">List</div>
         </div>
         <div class="view-type">
             <div class="view-switch-map">Map</div>
         </div>
     </div>
    </div>

Javascript

'use strict';

(function($) {

    var viewSwitch = {

        init : function() {

            this.$viewTab = $('.modal .view-types .view-type');
            this.$viewLayout = $('.modal .view-layout');

            this.select(1);
            this.$viewTab.on('click', this._onTabClick.bind(this));
        },

        select: function(i) {
            this._reset();
            $(this.$viewTab[i]).children('div').addClass('-active');
            $(this.$viewLayout[i]).addClass('-active');
        },

        _onTabClick: function(e) {
            let index = $(e.target).index();
            this.select(index);

        },

        _reset: function() {
            this.$viewTab.children('div').removeClass('-active');
            this.$viewLayout.removeClass('-active');
        },
    }

    $(window).on('load', function() {
            viewSwitch.init();
    })


})(jQuery);

Upvotes: 2

Views: 669

Answers (2)

pandamakes
pandamakes

Reputation: 591

I blieve this is why it fails to work: when user clicks the text, e.target now refers to the text, not the parent wrapper. Try change e.target to e.currentTarget and see if it works?

edit: reference: https://developer.mozilla.org/en-US/docs/Web/Events/click#Properties

Upvotes: 2

Jerdine Sabio
Jerdine Sabio

Reputation: 6140

Your code seems to work on mine (after adding the .modal parent); even if I click the text element inside, the alert("Hello World") is still triggered.

Do try the snippet, thanks.

'use strict';

(function($) {

  var viewSwitch = {

    init: function() {

      this.$viewTab = $('.modal .view-types .view-type');
      this.$viewLayout = $('.modal .view-layout');

      this.select(1);
      this.$viewTab.on('click', this._onTabClick.bind(this));
    },

    select: function(i) {
      this._reset();
      $(this.$viewTab[i]).children('div').addClass('-active');
      $(this.$viewLayout[i]).addClass('-active');
    },

    _onTabClick: function(e) {
      alert("Hello World!");
      let index = $(e.target).index();
      this.select(index);

    },

    _reset: function() {
      this.$viewTab.children('div').removeClass('-active');
      this.$viewLayout.removeClass('-active');
    },
  }

  $(window).on('load', function() {
    viewSwitch.init();
  })


})(jQuery);
.view-type {
  border: 1px solid black;
  padding: 5px 7px 5px 7px;
  display: inline-block;
  margin: 0px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="view-types -bordered">
    <div class="view-type">
      <div class="view-switch-list">List</div>
    </div>
    <div class="view-type">
      <div class="view-switch-map">Map</div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions