2013-05-03 44 views
0

我有一個表,在每一行(tr標記)設置三個事件onclick,onmouseoutonmouseover。 對於每一行,前三個td標籤包含一個onclick事件。Javascript事件和刪除過程後的奇怪行爲

<tr onclick="javascript:getWSData(...)" onmouseout="this.className=clTwo" onmouseover="this.className=clThree"> 
    <td onclick="popDivInfo(false, verRicDivCreaInfo('details'))"> 
     Details 
    </td> 
    <td onclick="popDivInfo(false, verRicDivCreaInfo('edit'))"> 
     Edit 
    </td> 
    <td onclick="if(confirm('Are you sure?')) {getWSData('delete');event.stopPropagation(); } else {alert('Cancelled!')}"> 
     Delete 
    </td> 
    <td>...</td> 
    <td>...</td> 
    <td>...</td> 
</tr> 

據我所知:一旦一個tdonclick觸發違約事件鏈應該執行它,然後再應該執行tronclick。這對我來說是好的。但是,如果刪除(第三個td),我不希望該事件鏈繼續前進,因此我使用event.stopPropagation();

標準的行爲是非常正確的,但我有一個單一的問題:一旦發生缺失或者詳細要麼編輯td停止工作。第一次點擊(在刪除之後)不能在最佳狀態下工作(我不完全知道發生了什麼),而刪除仍然有效。當我再次單擊時,td的onclick(詳細信息&編輯)新完成工作。

一些事情:

  • 行爲是刪除
  • 之前完全正確的每個刪除操作刪除其tr使用jQuery remove方法(如果我評論該指令沒有任何反應)
  • 發生此問題發生這種情況發生在整個列(詳細信息和編輯)
  • 如果我不確認刪除過程不會發生問題
  • tr的的onclick總是充分的詳細工作
  • 第一次單擊(刪除後)編輯確實部分地啓動JavaScript操作(導致預載啓動),但這個動作沒有完成。
  • 即使未完成的TD動作,就總是執行tr動作,所以有沒有unusefull stopPropagation()

任何想法?我根本沒有想法。

+0

你確定你沒有爲所有事件設置event.stopPropagation()嗎? – 2013-05-03 08:32:13

+0

我沒有明確地做,我的恐懼是它被別的東西隱式設置。 – 2013-05-03 08:35:22

+0

您的示例適用於我,請參閱[jsFiddle](http://jsfiddle.net/dmalinovsky/H3dP7/)。您必須在其他代碼中執行其他操作。 – 2013-05-03 08:38:25

回答

1

我記得tr就像虛擬標記單元。這僅適用於像tbody這樣的組元素。它根本不參與事件冒泡。所以你不應該綁定任何事件。我們可以在例子中看到這個:http://jsfiddle.net/z9vVM/。在這裏,您看到綁定到tr元素的事件無論如何都具有目標td,而不是tr。 綁定事件到tr是相同的,你給該行中的所有td一些類和事件綁定到該類 - tr只是組成元素的方式。 這就是爲什麼你的stopPropagation不起作用。根本沒有任何傳播。

你可以全方位工作的方式 - 正在使用類進行操作。看看這個例子:http://jsfiddle.net/RZscw/1/