On second click run another function with JQUERY

Question

I have written a script in Javascript using JQuery in which when I click on a button something happens (e.g. alert("hello"). What I am trying to do now is when I click again on the same button to run a different function. This is what I have now:

      $(document).ready(function(){
        $(".imgMarker").click(function() {
            var markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0)));   
            });
        });

I have read that I can use the toggle() method but I can not make it work.

What should happen the second, third and fourth time (etc.) someone clicks the button? — Sverri M. Olsen
– Sverri M. Olsen, Commented Feb 25, 2015 at 13:53

wrxsti · Accepted Answer · 2015-02-25 14:19:18Z

1

Updated answer and example: EXAMPLE

$.fn.clickToggle = function(func1, func2) {
    var funcs = [func1, func2];
    this.data('toggleclicked', 0);
    this.click(function() {
        var data = $(this).data();
        var tc = data.toggleclicked;
        $.proxy(funcs[tc], this)();
        data.toggleclicked = (tc + 1) % 2;
    });
    return this;
};


var addMarker = function(){
    /*
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0))); 
    */
    alert('Add Marker!');
};

var destroyMarker = function(){
    alert('Destroy Marker!');
};

$(".imgMarker").clickToggle(addMarker, destroyMarker);

Essentially we are adding a new method here called clickToggle() which takes two functions as arguments. This will toggle between the two functions you pass it.

edited Feb 25, 2015 at 14:19

answered Feb 25, 2015 at 14:09

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

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

4 Comments

user1919 Over a year ago

Thanks. The problem is that by unbinding it then after the sec click it keeps executing the last function. Is there something like this: $(this).bind("click");

wrxsti Over a year ago

What would you like the following clicks to do? Re-Add the marker? And continue to toggle back and forth?

user1919 Over a year ago

Can I ask one more thing. Is it possible using this function to pass a global variable to addMarker() function?

wrxsti Over a year ago

You should be able to simply by this: $(".imgMarker").clickToggle(addMarker(yourVar), destroyMarker);

Dhunt · Accepted Answer · 2015-02-25 13:56:15Z

1

You have to remove this click function and then bind it to another when you click the first time. Try this:

$(document).ready(function(){
    $(".imgMarker").click(function() {
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0))); 
        $(this).unbind("click");
        $(this).click(otherClickFunction);
    });
});

answered Feb 25, 2015 at 13:56

Dhunt

1,5949 silver badges22 bronze badges

5 Comments

user1919 Over a year ago

So my otherClickFunction will be something like this: $(function destroyMarker(){alert("hello");}); ??

user1919 Over a year ago

For some reason this is executed on page load.

wrxsti Over a year ago

var destroyMarker = function(){ alert('hello'); }; Then replace where Dhunt typed 'otherClickFunction' with 'destroyMarker'.

user1919 Over a year ago

Thanks. The problem is that by unbinding it then after the sec click it keeps executing the last function. Is there something like this: $(this).bind("click");

wrxsti Over a year ago

What would you like the following clicks to do? Re-Add the marker?

Oleksandr T. · Accepted Answer · 2015-02-25 19:30:07Z

1

I have written small plugin that count click on button, you can use it like so

$(document).ready(function() {
  $.fn.clickCounter = function () {
    return $(this).data('clicks', $(this).data('clicks') + 1 || 1) && $(this).data('clicks');
  };

  $(".imgMarker").click(function () {
    if ($(this).clickCounter() > 1) {
      console.log('do something');  
    }
  });
});

Example

edited Feb 25, 2015 at 19:30

answered Feb 25, 2015 at 14:00

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Collectives™ on Stack Overflow

On second click run another function with JQUERY

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related