JQuery OnClick not changing text on first click

Question

Have a basic link that I am using as a button and changing the text when the user clicks it to go from edit to done editing. When I first click the button, the click event happens but the text does not change until I click it again which is throwing off and not behaving as I would like:

HTML:

 <a type="button" id="editButton" class="editButton" style="cursor: pointer">EDIT</a>

JS:

$("#editButton").click(function () {
    var $this = $(this);
    $this.toggleClass('editButt');
    if ($this.hasClass('editButt')) {
        $this.text('EDIT');
    } else {
        $this.text('DONE EDITING');
    }
});

Fiddle

Its working see jsfiddle.net/U8Ns3/5 what make you think its not working — Satpal
– Satpal, Commented Jan 23, 2014 at 20:22
I see what you're saying. That certainly makes it react quicker. Now I need to add the class. Thanks. — isaac weathers
– isaac weathers, Commented Jan 23, 2014 at 20:23

Karl-André Gagnon · Accepted Answer · 2014-01-23 20:22:41Z

3

You toggle a class that is not present at first click, so it mean it will add it and then run your condition.

Add the class and problem solved

<a type="button" id="editButton" class="editButton editButt" style="cursor: pointer">EDIT</a>

http://jsfiddle.net/U8Ns3/4/

answered Jan 23, 2014 at 20:22

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

1 Comment

isaac weathers Over a year ago

That's it Karl-André Gagnon - Thank you. Will mark as the answer when I can in 8 mins.

rwisch45 · Accepted Answer · 2014-01-23 20:24:36Z

0

Try this out, and see fiddle

$("#editButton").click(function () {
    var $this = $(this);
    if ($this.hasClass('editButt')) {
        $this.text('EDIT');
    } else {
        $this.text('DONE EDITING');
    }
    $this.toggleClass('editButt');
});

answered Jan 23, 2014 at 20:24

rwisch45

3,7022 gold badges27 silver badges36 bronze badges

Comments

Milan and Friends · Accepted Answer · 2014-01-23 21:16:30Z

0

Simpler solution, here's a FIDDLE

<button type="button" id="editButton" class="edit">EDIT</button>


$('#editButton').click(function() {
  var text = ($(this).text() === 'EDIT') ? 'DONE EDITING' : 'EDIT';
  $(this).text(text).toggleClass('done');
});

answered Jan 23, 2014 at 21:16

Milan and Friends

5,6101 gold badge23 silver badges28 bronze badges

Collectives™ on Stack Overflow

JQuery OnClick not changing text on first click

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related