JQuery not adding class on click

Question

I'm struggeling with some code, I have code to when I click a <p> element it changes the iframe src and removes the class 'active' of all the elements in the .html file and then add the class 'active' to the clicked element.

But the class 'active' never gets added to the clicked element.

JAVASCRIPT

function loadIframe(url){
    $('.iframe_settings').attr('src', url);
    $('.nav li').removeClass('active');
    $(this).addClass('active');
};

HTML

<li class="w-100" id="http://whatever.com/" onclick="return loadIframe(this.id);">
    <p>

        <i class="fa fa-id-badge" aria-hidden="true"></i>
        <span class="nav-label">Intranet</span>

    </p>
</li>

provide class or id insteed of 'this', what is this in this code? — Rahul Sahu
– Rahul Sahu, Commented Dec 5, 2017 at 10:04
this is nothing in context you are using it. holding url in id? onclick handlers with functions might cause problems, use event binding instead. — CodeSmith
– CodeSmith, Commented Dec 5, 2017 at 10:08
pass another parameter as this in function and use it for add/remove class. — Swapnil
– Swapnil, Commented Dec 5, 2017 at 10:34

trk · Accepted Answer · 2017-12-05 10:04:40Z

2

you could pass the context (element) to the handler. I expect this to work:

loadIframe(this.id, this)

And,

function loadIframe(url, element){
    $('.iframe_settings').attr('src', url);
    $('.nav li').removeClass('active');
    $(element).addClass('active');
};

Let me know if that works for you.

Stray comment: I am not sure if it is a good practice to call url an id. You might find data-attributes useful. Attributes like data-id = "". In fact I would call it data-url.

answered Dec 5, 2017 at 10:04

trk

2,23815 silver badges21 bronze badges

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

3 Comments

NiceDevelopmentq Over a year ago

How would I then pass that through? Like loadIframe(this.data-url, this); ??

NiceDevelopmentq Over a year ago

I found out myself :D For anyone wondering I did this: this.getAttribute('data-url')

trk Over a year ago

There is a neat way in jquery to do this (imo). I think it is called $.data('url') if your data-attribute is called data-url. Here is a link: api.jquery.com/data.

Piotr Płaczek · Accepted Answer · 2017-12-05 10:10:34Z

0

you can not use $(this).addClass();

check this and this

answered Dec 5, 2017 at 10:10

Piotr Płaczek

6102 gold badges11 silver badges20 bronze badges

2 Comments

Piotr Płaczek Over a year ago

ouch, 82Tuskers was faster ;)

Steven Over a year ago

It would have been better if you could provide the answer directly instead of redirecting them to a different question. This can save a lot of searching for future readers.

vinod gami · Accepted Answer · 2017-12-05 10:13:58Z

0

You need to correct your code add identifier in correct way.

function loadIframe(url){
    $('.iframe_settings').attr('src', url);
    $('.nav li').removeClass('active');
    $("#"+url).addClass('active');
};

answered Dec 5, 2017 at 10:13

vinod gami

674 bronze badges

Collectives™ on Stack Overflow

JQuery not adding class on click

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related