Select label through . find

Asked

Viewed 54 times

3

I’m trying to create/adapt a tree list, however I am not being able to expand my list by clicking on a label.

List:

<div id="listContainer">
  <ul id="expList">         
    <li style="">
        <label style="margin-top: 50px;border-style: solid;  border-width: 1px; border-color: #7C7C7C; background-color:#E0E0E0">
        Item A
        </label>
            <ul>
                <li>
                    itens lista A
                </li>
            </ul>
    </li>
</ul>

The error starts from my js function to expand the list:

function prepareList() {
        $('#expList').find('li:has(ul)')
        .click(function (event) {
            if (this == event.target) {
                $(this).toggleClass('expanded');
                $(this).children('ul').toggle('medium');
            }
            return false;
        })
        .addClass('collapsed')
        .children('ul').hide();

...
...
}

I’ve tried to find the label on expList just to test and I couldn’t resolve the issue:

$('#expList').find('label')
        .click(function (event) {
...
...
}

Follow the full code: jsfiddle

PS. - If you click outside the list, it expands

javascript jquery

  • What’s the idea of this line? if (this == event.target) { What do you want with her? (Just to understand better what you’re looking for)

  • @Sergio, the problem is of this line (if you take it works as I want). I will delete the question, because the match will not help anyone in the future. Thanks for the help ;)

  • Do not delete. The problem on this line is that the this and the event.target are not always the same element. And this causes confusion to many people, hence the question is useful...

  • Oh I’m already understanding my mistake. My departure event.target had the value something like "clicked on li", and mine this refers to the element. That’s what you’re trying to say?

  • In what scenario do you want that if give false? IE, how is it, this is the <li> and the event.target is the descending element of this that was clicked, for example the <label>. Unless the <li> have for example a padding will be difficult to have that if to give true.

  • The match by clicking outside the li was going to be false. But as the label is inside the li I didn’t understand the mistake

  • To prevent the click on the children from triggering the parent’s click event, use Event.stopPropagation();

  • 1

    In this case this line is not necessary because the $('#expList').find('li:has(ul)') selects only li's. And while you’re at it $('#expList li:has(ul)') only.

  • Yeah, I figured out why it didn’t. I thought I was gonna select the kids from li

Show 4 more comments

1 answer

3


There is a difference between using the this and the event.target within an event receiver.

If the receiver is tied to a descending element, then this == event.target. But in case the event is associated/tied to a relative then the event.target will be the descending element of the initial, the one that received the click. The event will then go up in the DOM (Bubbling) until you reach the Vent Handler which is then activated having as this the element that is in the selector.

In your case the this will always be a li, as requested by the selector li:has(ul), and Event.target the <label>. There may be cases where the event.target == li. In case you have a large padding and the user clicks outside the limits of the label and still within the li. But in either case the this shall be assigned the li in question.

Looking at this example with background color on li you can tell when the this == li

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.