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.