javascript取消匿名点击功能

Question

这里真正的基本东西。我想给一个点击函数一个名字并给它分配一些参数。目标是代码的可重用性，这样我就只能编写一个通用的函数来执行常见的任务，例如让用户删除各种数据。

这里是一个jsfiddle向你展示我的意思。

而这里的代码：

的HTML：

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

和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. 

我怎么给这个按钮点击事件的名称？

更新谢谢大家！ $('button')应该是$(document.body)或按钮的父元素。如果你做了简单的改变，它就可以工作。你也可以像迈克尔布恩建议的那样做。

Answer 1

只要重构你的代码，把删除功能在其自身的功能

<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(); 
}​ 

现场测试：http://jsfiddle.net/e2kuj/2/

Answer 2

您可以使用$('button').on('click', 'button', clickHandler);来引用clickHandler函数。

我很喜欢这样的事情，因为除了可重复使用以外，它还有以下优点。

• 我就能对面补丁发送的情况下，有在clickHandler
• 有人错误可以增加我的方法，是不可能的匿名方法
• 可读的，也有用看堆栈跟踪在出现错误的情况下

希望有所帮助。

更新：

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

Answer 3

，你可以用不同的方式删除元素：

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

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

Answer 4

在你的小提琴手，在(function deleteThis(){})()是使它私人和你试图访问它作为一个全球！

Answer 5

这几乎是正确的。我更新了它 - >http://jsfiddle.net/fz5ZT/41/

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

Answer 6

我想你误会事件。 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用这个ID就会被忽略掉。

但是，如果这是家庭作业，我想知道你是否理解作业。名为'clicked_id'的变种表明这个想法是点击div使它们消失并使用委派。那个很简单。

您需要了解事件委派和事件冒泡才能看到这里发生了什么。基本上，当点击某些东西时，事件会触发父元素，然后触发该父元素的父元素，一直到HTML标记。这发生在所有事件上，并且不会导致您可能认为的麻烦，因为容器很少分配给事件监听器。链接和按钮通常是端点节点，或者最多包含一个跨度或图像。通常当冒泡导致问题时，这是因为有人用HTML做了一些糟糕的事情，或者他们应该首先使用委托。

'on'是一次适当命名并且不太容易混淆的'委托'jquery方法的新可怜名字。本质上，类“delete”中的任何东西都会触发处理程序。我们不关心ID，因为这个想法是杀死被点击的div，'this'给了我们一个参考。这对于JQ来说是非常不寻常的行为，因为大多数方法将'this'指向'body'，但它显然是指出事件委派更有用的事情。

$('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.