fbitterlich fbitterlich - 3 months ago 26
Javascript Question

jQuery addClass() not working when also using attr("href", something)

I want to create a link (in form of a Bootstrap button) that works only on the second click; on the first click it is supposed to change its appearance a bit. For this I use

.addClass(newClass)
,
.removeClass(oldClass)
, and then
attr("href", newUrl)
.

(Edit) To clarify: In the beginning, the link (anchor) has "#" as its
href
target, and an onlick handler. That handler, when executed on the first click, will remove itself from the anchor, and instead set the desired target URL in the
href
attribute. That is supposed to cause the link to only redirect to its target URL on the second click.)

This almost works, but only if I omit the
attr()
setting. When it is there, the class reverts to the old class of the link as soon as the script exits. When I step through it in the debugger, the link briefly changes its appearance as expected, but changes back when the event handler exits.

This is the HTML code:

<a id="twoclick-vjffkrzw" onclick="enabletwoclickbutton('twoclick-vjffkrzw',
'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1')"
class="btn btn-xs btn-warning" href="#">Remove this</a>


The script:

function enabletwoclickbutton(btn_id, url) {
var whichbtn = '#' + btn_id;
var btn = $(whichbtn);
if (btn.hasClass("btn-warning")) {
btn.off("click");
btn.attr("href", url);
btn.removeClass('btn-warning');
btn.addClass('btn-danger');

} else {
console.log("Hey, this shouldnt happen.");
}

}


I'm not very experienced in JS and jQuery, so it's quite possible that this is a stupid mistake on my side, but I just can't see it.

Answer

Use e.preventDefault() to avoid the default behavior of anchor.

Your way (however I recommend you to go with one below for readability and easy to modify later.)

html

<a id="twoclick-vjffkrzw" onclick="enabletwoclickbutton(event,'twoclick-vjffkrzw', 'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1')" class="btn btn-xs btn-warning" href="#">Remove this</a>

js

 function enabletwoclickbutton(e,btn_id, url) {
    var whichbtn = '#' + btn_id;
    var btn = $(whichbtn);
    if (btn.hasClass("btn-warning")) {
        e.preventDefault();
        btn.off("click");
        btn.attr("href", url);
        btn.removeClass('btn-warning')
           .addClass('btn-danger');

    } else {
        console.log("Hey, this shouldnt happen.");
    }

}

Recommended

Do not mix your javascript and html which is very hard to read as you can see in your code. You can write the entire code in javascript only

eg.

$('#twoclick-vjffkrzw').click(function(e){
    var btn = $(this);
    if (btn.hasClass("btn-warning")) {
        e.preventDefault();
        btn.off("click");
        btn.attr("href", 'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1');
        btn.removeClass('btn-warning');
        btn.addClass('btn-danger');

    } else {
        console.log("Hey, this shouldnt happen.");
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="twoclick-vjffkrzw" class="btn btn-xs btn-warning" href="#">Remove this</a>

Comments