How to disable a Javascript Function when a different one is Enabled?

Question

I have this function:

$(document).ready(function(){   
    function Fos(buttonSel, inputSel, someValue, cssProperty) {
        $(buttonSel).click(function(){   
            var value = $(inputSel).attr("value");
            $("div.editable").click(function (e) { 

                e.stopPropagation();

                showUser(value, someValue, this.id)
                var css_obj={};
                css_obj[cssProperty]=value;
                $(this).css(css_obj);  
            });        
        });        
    }   

Here are three places where function is written:

Fos('#border_button', '#border-radius', 2, '-webkit-border-radius');
Fos('#background_color_button', '#background-color', 1, 'background-color');
Fos('#opacity_button', '#opacity', 3, 'opacity');

---

<input type="text" id="border-radius" value="20px">
<div id="border_button">BORDER RADIUS</div>
<input type="text" id="background-color" value="red">
<div id="background_color_button">Background</div>
<input type="text" id="opacity" value=".5">
<div id="opacity_button">Opacity</div> 

---

<div id="2" class="defaultclass editable" style="<?php getStyle('2') ?>">
    something
</div>

When you click the DIV with the ID= "border_button", or "background_color_button", or "opacity_button" it waits for you to click any DIV with class="editable" , ... $("div.editable").click(function (e) { ... it executes the function with those parameters.

I just need a fix that will only allow ONE function with the parameters to be enabled at one time.

Currently, when you click on all three divs with ID = "border_button", or "background_color_button", or "opacity_button" AND THEN on a div with class="editable", it executes the function with ALL THREE sets of parameters.

This is bad. I can't figure it out.

Answer 1

You can't "disable" a function, but you can set a variable that will force it to exit right away:

 var stopMe = true

 function myFunction() {

   if(stopMe) {

      return;

   } 

  ...

 }

Answer 2

Run the function for tag with a specific class. And a the end of the function remove this class from the tag.

jQuery(".myclass").click(function(){
/* do something */ 
jQuery(this).removeClass('myclass');

});

Answer 3

Can't tell everything from your question. But this part $("div.editable").click(function (e) { will bind multiple click events to div.editable each time the user clicks Foo arugments[0] or buttonSel .

Answer 4

You seem to be binding and rebinding the same functions over and over, which is probably why you have that e.stopEventPropagation in there. Try assigning the events once and then managing the current state (which button is active) and going from there:

var $currentInput = null;

$("#border_button,#background_color_button,#opacity_button").click(function() {
    if ($currentInput == null) {
        $currentInput = $(this).prev();
    }
});

$("div.editable").click(function(e) {
    if ($currentInput == null)
        return;

    $(this).css(GetCssProperties());
    showUser($currentInput.val(), /* where does someValue come from? */, this.id)
    $currentInput = null;
});

function GetCssProperties() {
    if ($currentInput == null) return null;

    var value = $currentInput.val();

    if ($currentInput.attr("id") == "border-radius") return {
        "-webkit-border-radius": value
    }
    if ($currentInput.attr("id") == "background-color") return {
        "background-color": value
    }
    if ($currentInput.attr("id") == "opacity") return {
        "opacity": value
    }
}

---

working example here: http://jsfiddle.net/HUJ5A/

Answer 5

This could be a pssible solution:

• Have a global variable (or HTML hidden input) say, lastDivClicked, to store the id of the recently clicked div
• Update lastDivClicked everytime one of those three divs are clicked upon

• Change your function to this:

  function Fos(inputSel, someValue, cssProperty) {

    var buttonSel = $('#lastDivClicked').val(); $(buttonSel).click(function(){ ... } 

  }