Javascript: change onclick action of elements after adding a class

Question

I have a situation like this:

HTML

<span class="element e1" id="FirstElement" onclick="Javascript:alert(this.id)"> 
    <span class="element e2" id="SecondElement" onclick="Javascript:alert(this.id)"> ELEMENT </span>
</span>
<button class="addButton"> ADD CLASS </button>

JAVASCRIPT:

$(document).ready(function() {
    $('span.element.anotherClass').click(function(e) {
          alert("ANOTHER ACTION"); 
          return false; // I tried also preventDefault() but not working
    });

    $('.addButton').click(function(e){
        $('span.element').addClass(" anotherClass");
    });

});

Note the two span elements have a onclick action. I want that after adding a class to these elements by clicking on the button, they stop doing the old onclick actions and start doing the new action ( = show the "ANOTHER ACTION" alert).

You can try the code above in this Fiddle.

Hope someone will help me with this problem I can't figure. Thanks

lemieuxster · Accepted Answer · 2015-01-29 17:53:19Z

1

If you removed the onclick from the HTML then you could do something like this:

$(document).ready(function() {
  $('span.element').click(function(e) {
    if ($(this).hasClass('anotherClass')) {
      alert("ANOTHER ACTION");
    } else {
      alert($(this).attr('id'));
    }
    return false; // I tried also preventDefault() but not working
  });

  $('.addButton').click(function(e) {
    $('span.element').addClass(" anotherClass");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="element e1" id="FirstElement"> 
    <span class="element e2" id="SecondElement"> ELEMENT </span>
</span>
<button class="addButton">ADD CLASS</button>

answered Jan 29, 2015 at 17:53

lemieuxster

1,0817 silver badges14 bronze badges

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

1 Comment

Gio Bact Over a year ago

Yes, It seems to me that this is the best way to do it. Thank you very much

Travis J · Accepted Answer · 2015-01-29 17:55:15Z

1

jsFiddle Demo

You need to delegate the click event to a selector instead of assigning it once the first time the code runs. This will allow it work for future elements and not just the elements it finds when it is first run.

$('body').on('click','span.element.anotherClass',function(e) {
      alert("ANOTHER ACTION"); 
});

You may also want to make sure you only add the class once. Further, in order to make sure the previous onclick events are removed, you will need to iterate through them and remove the onclick assignment.

$('.addButton').click(function(e){
    $('span.element').not('.anotherClass').each(function(){
      this.onclick = void 0;//void 0 is just undefined
    }).addClass("anotherClass");
});

edited Jan 29, 2015 at 17:55

answered Jan 29, 2015 at 17:49

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

4 Comments

Gio Bact Over a year ago

Ok thank you, but how can I avoid that the two old actions are executed?

Stan Shaw Over a year ago

Wouldn't it be easier to just call "off" and then "on" for that class' click event? Like $(".Class").off("click"); $(".Class").on("click", functionName);

Stan Shaw Over a year ago

@TravisJ sorry I don't understand your response.

Travis J Over a year ago

@Stan - Your code will not remove the event handler. jsfiddle.net/rp87vqeo

George Nemes · Accepted Answer · 2015-01-29 18:07:23Z

0

$(document).ready(function() {
    $('body').on('click','span.element.anotherClass',function(e) {
      alert("ANOTHER ACTION");
        return;
    });

    $('.addButton').click(function(e){        
        $('span.element')[0].onclick = '';
        $('span.element')[1].onclick = '';        
        $('span.element').addClass("anotherClass");

    });

});

Note that this will trigger twice, since you actually have 2 span.element that you're clicking.

answered Jan 29, 2015 at 18:07

George Nemes

1967 bronze badges

Comments

Stan Shaw · Accepted Answer · 2015-01-29 18:09:34Z

0

Try this - seems a little easier to manage than trying to set universal click events and having to unbind/bind them with every click.

$(document).ready(function(e){
    $(".addButton").on("click", function(e){
        e.preventDefault();
        $("span.element").removeClass("anotherClass"); //Just in case you double-click
        $("span.element").addClass("anotherClass");
        return false;
    });

    $(".element").on("click", function(e){
        e.preventDefault();
        if ($(this).hasClass("anotherClass"))
            alert("another class");
        else
            alert($(this).prop("id"));
        return false;
    });
});

answered Jan 29, 2015 at 18:09

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

Comments

Louis Serre · Accepted Answer · 2015-01-29 17:53:54Z

-1

You can do this:

$('span.element').attr("onclick", yourNewFunction());

answered Jan 29, 2015 at 17:53

Louis Serre

1481 silver badge10 bronze badges

1 Comment

user3310334 Over a year ago

That won't work - it'll set the onclick attribute to the return value of their function.

Collectives™ on Stack Overflow

Javascript: change onclick action of elements after adding a class

5 Answers 5

1 Comment

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related