Use the same button to trigger two different JQuery events

Question

I am trying to use the same button to trigger an ajax call to add a database entry if it is clicked and then trigger a different ajax call to remove the entry it is clicked again.

I have tried using toggleClass and although the button class does change and it's appearance changes accordingly the function still thinks it has the old class name.

$(document).ready(function() { 
   $(".selected").on("click", function() {
       $(this).text(function (i, oldText) {
        return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';   
    });
       $(this).toggleClass('selected selected_btn');
   });

   $(".selected").on("click", function() {
        alert('selected');
    });
   $(".selected_btn").on("click", function() {
        alert('de selected');
    });   
});

With the present code the alert is always 'selected'.

ProllyGeek · Accepted Answer · 2014-05-20 20:16:27Z

2

$(document).ready(function() { 
   $(".selected_btn").on("click", function() {
       $(this).text(function (i, oldText) {
        return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';   
    });
       $(this).toggleClass('selected');
  if($(this).hasClass("selected"))
      alert("Selected")
  else 
      alert("de-Selected")
   });
 });

here is a fiddle:

http://fiddle.jshell.net/prollygeek/3LLN2/

answered May 20, 2014 at 20:16

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

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

Comments

Kevin Jantzer · Accepted Answer · 2014-05-20 20:28:12Z

1

Here is a simple and readable example on how to do this:

$(document).ready(function() {

    $('.select-img').on('click', function(){

        var $el = $(this);
        var isSelected = $el.attr('data-selected');

        if( isSelected != 'true' ){
            firstFn();
            $el.html('Use Image').attr('data-selected', true)
        }else{
            secondFn();
            $el.html('Select').attr('data-selected', false)
        }

    })

    var firstFn = function(){
        alert('first thing to do');
    }

    var secondFn = function(){
        alert('second thing to do');
    }

})

Demo

edited May 20, 2014 at 20:28

answered May 20, 2014 at 20:19

Kevin Jantzer

9,5112 gold badges31 silver badges53 bronze badges

Comments

Sharikov Vladislav · Accepted Answer · 2014-05-20 20:20:25Z

1

Use *Class functions:

Working code:

$("a").on("click", function() {
    if($(this).hasClass("bob")) {
        // do delete
        alert("delete");
        $(this).removeClass("bob");
    } else {
        // do insert
        alert("insert");
        $(this).addClass("bob");
    }
});

Demo

answered May 20, 2014 at 20:20

Sharikov Vladislav

7,2999 gold badges53 silver badges92 bronze badges

Comments

Xesau · Accepted Answer · 2014-05-20 20:15:26Z

0

 $(".selected").on("click", function() {
    alert('selected');
 });

Overrides the event you put on the beginning of the document.ready, I think. (might not be true, but I think it is)

answered May 20, 2014 at 20:15

Xesau

1611 silver badge9 bronze badges

Collectives™ on Stack Overflow

Use the same button to trigger two different JQuery events

4 Answers 4

Comments

Demo

Comments

Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related