0

Let's say we've got a javascript function that is set to run whenever a delete button on the screen is clicked...

function deleteThis(obj) {
     /*work to delete object*/

     window.location="newurl.php";
}

$('.delete').click(function(){
    deleteThis($(this));
});
<div class='delete'>Delete</div>

Now let's say you want different types of delete buttons. They all do the first few things the same, but the last step is different. What I've been doing is this...

function deleteThis(obj) {
     /*standard work to delete object*/

     if (obj.attr('type')=='a') {
        //extra work for type a
     } else if (obj.attr('type')=='b') {
        //extra work for type b
     }

     window.location="newurl.php";

}
$('.delete').click(function(){
    deleteThis($(this));
});

<div class='delete' type='a'>Delete</div>

Which works fine with just a few different types. But it's starting to get a little out of control. What I'd like is to be able to do this...

In my main javascript.js file:

function deleteThis(obj) {
     /*standard work to delete object*/

     /*do any extra functions that have been designated for this type*/

     window.location="newurl.php";

}
$('.delete').click(function(){
    deleteThis($(this));
});

Code included only on the pages where there's a "type a" button

$(document).ready(function(){
      /*something that tells the deleteThis() function that it should do something extra when running*/
});

That way I wouldn't have to pass any extra variables to deleteThis(), I wouldn't have to make different onclick events for the different types of delete buttons. I could just have one type of delete button. Then on the pages where I want the delete button to behave different, all I have to do is put an extra bit of javascript code once.

Is something like this possible?

UPDATE

Note that at the end of deleteThis() is a window redirect. That makes it so any extra click handlers won't get fired because we'll have already gone away from the page.

rgbflawed
  • 1,957
  • 1
  • 22
  • 28
  • The first version (passing a value to make decisions) is called *command coupling* and is best avoided. "managers make decisions and workers work" is the usual analogy for ensuring worker functions do not make decisions. You could just wire up additional handlers for the extra work (if your code suits). They will fire in the order they were registered. – iCollect.it Ltd Jul 11 '14 at 18:19
  • 1
    jquery allows functions to be passed as parameters, [example here](http://stackoverflow.com/questions/9974844/pass-a-function-as-a-parameter-and-then-execute-it-in-a-jquery-function). You can use method names as type value. – Samy S.Rathore Jul 11 '14 at 18:34

2 Answers2

0

You could register a second click listener for buttons of a specific type using css selectors. The listeners will be called in the order that they are added.

$('.delete').click(function(){
    console.log("I'm called for all delete buttons");
});

$('.delete[type=a]').click(function(){
    console.log("I'm also called for all delete buttons of type a");
});
Patrik Oldsberg
  • 1,540
  • 12
  • 14
  • Ah, should have mentioned that a problem here is that inside deleteThis() is a redirect. So the second click handler won't get a chance to fire because the window will have already been redirected. (updating question now) – rgbflawed Jul 11 '14 at 18:27
  • Depending on what is done in the second handler you might be able to use setTimeout(, 0) to delay the redirect in the first handler. – Patrik Oldsberg Jul 11 '14 at 18:33
  • Why dont you just create two functions one for the common thing to be done i.e the url redirect and one for the other specific things to be done and call the common function for the common delete handler mentioned above and call the common+specific functions for the specific handler – humblerookie Jul 11 '14 at 18:40
0

One thing you could do is use the eval() function.

Code included only on the pages where there's a "type a" button:

a = function() {
    // Do something extra here for the specific type a.
}

In your main javascript.js file:

function deleteThis(obj) {
    // Special function for object type triggered by eval.
    try {
        eval(obj.attr('type'))();
    } catch(e) {}

    // Standard work here.
    window.location="newurl.php";

}
dwitvliet
  • 7,242
  • 7
  • 36
  • 62