CODEWITHSUNDEEP
javascriptjquery
lloydphillips
lloydphillips

Reputation: 2855

jquery onclick child element

I've got a button that has an even attached to the anchor element. When I'm clicking on the span inside the anchor the event is getting fired as intended. The problem I have is that the function is using the span as the element that triggered the event. Here is my UI code:

<a href="" class="col-xs-4 text-center facebook-share" style="background-color:yellow" data-share="facebook" data-title="Check this out, yo" data-image="my-image" data-link="my-url" data-description="Nice, very nice" href="#">
    <span class="like">LIKE</span>
    <span class="sep">/</span>
    <span class="like-count count">0</span>
</a>

And here is the event handler from the library I'm using:

events: function() {

            var self = this;

            this.element.on('click', 'a[data-share]', function( e ) {

                e.preventDefault();

                var $el = $(e.target);

                switch ( $el.data('share') ) {
                    case 'facebook': self.facebook( $el ); break;
                    case 'twitter': self.twitter( $el ); break;
                    case 'googleplus': self.googleplus( $el ); break;
                }

                $el.blur();

            });

            if ( this.options.facebook.appID ) {

                window.fbAsyncInit = function() {
                    FB.init({appId: self.options.facebook.appID, status: false});
                };

            }

        }

In this $el is the span which then means there is no data. Should the event be propagating up to the anchor? What can I do to ensure this happens?

Upvotes: 0

Views: 494

Answers (1)

konsumverweigerer
konsumverweigerer

Reputation: 271

You have to use this instead on e.target because the target can be a descendent of the element the event was registered for (here the a[data-share])

see also JQuery Event.target

Upvotes: 3

Related Questions