Need help in click function in jquery

Question

I have a widget in my page. If i click on any part of the widget it should navigate to next page which has some details about that widget. I need a dialog to be opened if i click on a span named "likes" available within that widget. But instead it is navigating to the next page even if i click on that link..

It should navigate to next page if i click on any part of the widget except that link..

This is normal code for click:

 $('td#' + parentElement).find('div.streamcontenttopmain').click(function() {
            window.location.href = 'TaskDetails.aspx?id=' + json_row.id + '&community=' + getQueryParam('community');
        });

This code will it navigate to next page if i click anywhere within the widget

My span is defined like this:

<span class="flft likes" style="MARGIN-LEFT: 2px">

This is What i tried:

 $('td#' + parentElement).find('div.streamcontenttopmain').click(function (e) {

            if ($(this).hasClass("flft likes")) {

                alert("hi");
            } else {
                window.location.href = 'TaskDetails.aspx?id=' +
                               json_row.id +
                               '&community=' +
                               getQueryParam('community');
            }
        });

I posted an answer using the condition. The problem is that even when you click the span the event won't be handled until it's propagated to the 'div.streamcontenttopmain'` element at which point thiswill be the div and not the span — Rune FS
– Rune FS, Commented Oct 5, 2012 at 8:05

Blender · Accepted Answer · 2012-10-05 07:19:33Z

2

You can stop the event from bubbling up to the div elements and triggering their event handlers:

$('#' + parentElement).find('span.likes').click(function(e) {
    e.stopPropagation();

    // ...
});

answered Oct 5, 2012 at 7:19

Blender

300k55 gold badges462 silver badges512 bronze badges

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

Comments

Ulan Murzatayev · Accepted Answer · 2012-10-05 08:23:37Z

1

You can also do something like :

$(document).ready(function(){
    $('div').click(function(e){
        if(e.toElement.nodeName == "SPAN")
            alert('span clicked');
        else
            alert('div clicked');
    });
});

I showed it in this demo: http://jsfiddle.net/SxhWy/3/

edited Oct 5, 2012 at 8:23

answered Oct 5, 2012 at 7:26

Ulan Murzatayev

8705 silver badges15 bronze badges

3 Comments

Xavier Over a year ago

I have tried the way u mentioned.. But it is throwing an exception as: "console is undefined"

Ulan Murzatayev Over a year ago

@Xavier I deleted this line, It was only needed for me to trace the exact names of fields.

Ulan Murzatayev Over a year ago

@RuneFS I will try to be more explicit.

Rune FS · Accepted Answer · 2012-10-05 08:24:28Z

1

If you stop the propagation of the event you can handle it in the span wihtout it ever reaching the div. That woul look similar to the below

$('td#' + parentElement).find('div.streamcontenttopmain').click(function(e){
      window.location.href = 'TaskDetails.aspx?id=' + 
                               json_row.id + 
                               '&community=' + 
                               getQueryParam('community');
})).find('span.likes').click(function(e) {
           e.stopPropagation();
           //do the span specific stuff here
});

edited Oct 5, 2012 at 8:24

answered Oct 5, 2012 at 7:20

Rune FS

21.7k7 gold badges65 silver badges101 bronze badges

2 Comments

Xavier Over a year ago

I have edited my question in the way u mentioned.. I have tried in the same way but still it remains the same.. Should i add anything more...

Rune FS Over a year ago

@Xavier the original answer I wrote was a blunder (see comment to question for why) this which expands on Blenders answer will however work if I've understood your question and context correct

Collectives™ on Stack Overflow

Need help in click function in jquery

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related