Geek asks and answers

Javascript de-anonymizing click function

really basic stuff here. I would like to give the click function a name and give it some parameters. The goal is to reuse the code, so that I can write only one common function for common tasks, for example, so that users can delete various data.

Here's jsfiddle to show what I mean.

And here is this code:

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 JS:

// this function would be loaded on my site 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 action on that page.

How do I give this button a click event name?

update thanks everyone! $('button')should have been $(document.body)either the parent of the button. It works if you make this simple change. You can also do this, as Michael Buen suggests below.

+3
source
6

,

<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/

+2

, (function deleteThis(){})() , !

+1

. → http://jsfiddle.net/fz5ZT/41/

function deleteThis(id){
    $('button').click(function(){
        $('div[data-id="'+id+'"]').hide();  
    });    
};
deleteThis(3);​
+1

, . deleteThis .

HTML: ( HTML - )

<button>delete this</button>
<div id="del_3" class="delete">something bad</div>
<div id="del_4" class="delete">something else bad</div>

JS: ()

var deleteTargetId = 'del_3'; //clicked_id renamed for clarity

function deleteThis(targetId){
    $('#'+targetId).remove(); //removes rather than hides the html
}

$('button').click( function(){
    deleteThis(deleteTargetId);
} );

deleteTarget, HTML .

, , , . Var 'clicked_id' , , div, . .

, , . , - , , , HTML-. , , . . , - - HTML, .

'on' - , jquery. , - "delete" . ID, , div, , 'this' . JQ, 'this' "", , , .

$('body').on('click', '.delete', function(e){
    $(this).remove(); //this refers to the originally clicked element
} );
//note: not the solution you asked for, but possibly the one you needed.
+1

$('button').on('click', 'button', clickHandler); clickHandler.

, , , , .

  • , clickHandler
  • Someone may increase my method, which is not possible using anonymous methods.
  • It is read, and it is also useful to see the stack trace in case of errors

Hope this helps.

Update:

function clickHandler(ev) {
    ev.preventDefault();
    // ... handler code
}
0
source

you can delete an item differently:

  $('button').on('click', function(){
      $(this).next("div").remove();
    });

http://jsfiddle.net/fz5ZT/46/

0
source

More articles:


All Articles