javascript de-anonymizing a click function

Question

really basic stuff here. I'd like to give a click function a name and assign some parameters to it. The goal is code reusability such that I can write only one generic function for common tasks such as for enabling users to delete various data.

Here's a jsfiddle to show you what I mean.

And here's that code:

the HTML:

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>

and the JS:

// this function would be loaded on my site's template and therefore would be available across my entire site.
function deleteThis(data_id){           
   $('button').on('click', 'button', function(){
      $('div[data-id="'+data_id+'"]').hide();  
   });
}  

var clicked_id=3;
function deleteThis(clicked_id); 
// this function would be called on the various pages where users can delete things and this variable, clicked_id, would be assigned=3 by the user's action on that page.

How do I give this button click event a name?

update thanks all! the $('button') should have been $(document.body) or the button's parent element. It works if you make that simple change. You can also do it as Michael Buen suggests below.

Answer 1

Just refactor your code, put the delete functionality on its own function

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>
​

$('button').on('click', function() { deleteImmediately(3) });

function deleteImmediately(id) { -- refactored code
    $('div[data-id='+id+']').hide();  
}​

Live test: http://jsfiddle.net/e2kuj/2/

Answer 2

In your fiddler, the (function deleteThis(){})() is making it private and you are trying to access it as a global!