jQuery的「上」不工作

我一個靜態創建表：jQuery的「上」不工作

<table id="table" style="width:100%"> 
    <tbody id="tbody"> 
    </tbody> 
</table>

我dinamically創造了一些元素：

var tbody = document.getElementById('tbody'); 

for (var i = 0; i < 8; i++) { 
    var tr = document.createElement('tr'); 
    for (var j = 0; j < 8; j++) { 
     var td = document.createElement('td'); 
     td.appendChild(createDiv(i,j)); // div id is = i + ' ' + j 
     tr.appendChild(td); 
    } 
    tbody.appendChild(tr); 
}

但現在我想添加一個回調函數爲每個div，但這是行不通的。我認爲問題是與jQuery的功能，但我不知道如何解決它。

for(var x=0;x<8;x++){ 
    for(var y=0;y<8;y++){ 
     $(document.body).on('mousedown', '#' + x + ' ' + y, function(){ 
      var audio = document.getElementById('audio'); 

      audio.currentTime = 0; 
      audio.play(); 
     }); 
    } 
}

當我嘗試做同樣的靜態元素，它工作正常，有沒有人知道發生了什麼？謝謝

來源

2016-06-29 Samuel Paz

id值不能包含空格。 – Pointy

不能以數字開頭 – ntgCleaner

謝謝你的幫助，那就是問題所在！謝謝！ –

這裏還有其他答案在他們的答案中是正確的，但我想補充一點說明。

jQuery's on()的目的是將事件處理程序附加到選定的元素。 selector參數的用途是創建委託處理程序。從jQuery文檔：

當事件直接發生在綁定元素上時，不會調用該處理程序，但僅對匹配選擇器的後代（內部元素）。

另外：

委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。

（我建議你閱讀的方式直接和委託的事件全款。）

在任何情況下，對於您的特定示例，您希望以這樣的方式構建DOM，即在委派事件附加時確保存在頂級元素。它可能是你的桌子，或者是桌子上方的div元素。你也可以連接到身體或文檔，但是，最好是附加事件將保證按照該文件存在，最接近的元素：

附加附近的頂部變成了委託的事件處理程序文檔樹可能會降低性能。每次事件發生時，jQuery都必須將該類型的所有附加事件的所有選擇器與從事件目標到文檔頂部的路徑中的每個元素進行比較。爲獲得最佳性能，請在儘可能靠近目標元素的文檔位置附加委派事件。避免過多使用文檔或document.body來處理大型文檔上的委派事件。

在你的特殊情況下，表格似乎是一個有保證的元素。正因爲如此，你可以附加到並委託裏面的div。（當然，適當調整自己的選擇，以獲得正確的div）假設你想所有div冒泡，那麼你的附件會是這樣的：

$('#table').on('mousedown', 'div', function(e) { 
    console.log('Do some stuff here.'); 
});

當然，你要做到這一點在document ready handler內部確保您的元素存在。

此外，請注意，ID不能以HTML 4規範中的數字開頭。如果您正在開發HTML 5，但是，只要它們是唯一的，則不會包含任何空格，並且至少是單個字符。

來源

2016-06-29 01:19:02 JasCav

關於你的事件處理程序艦隊。

使用3個步驟，使之1點的處理程序爲所有的DOM元素：

製作的id sequenctial數部分，把他們區分開來。

然後只爲實體mousedown調用實例化一個事件處理程序。沒有更多的for循環。

通過事件對象（事件回調的參數）區分哪個ID被點擊。（我認爲它是event.target或類似的）

關於在評論中指出的這種用法，引用一個指向域對象的dom元素的id通常是有用的。因此，顯式ID可以直接與底層資源標識符（pk ...）相關聯。

來源

2016-06-29 00:29:46 Lemonade

如果他給元素一個類，他可以爲它添加一個處理程序，並且jQuery將負責將'this'綁定到目標元素。 – Pointy

是的，絕對正確;）這是最直觀，最直接的方式！也許一步一步^^ – Lemonade

$(document.body).on('mousedown', '#tbody td', function(e){ 
    //TODO::add code here 
});

無需將事件綁定到每個td dom。

來源

2016-06-29 00:39:41

創建每個#ID委託是矯枉過正

您可以單擊事件直接連接到每個ID在循環或簡單的創建一個代表事件偵聽器。

$("#table").on("click", "div", function(e){ 
    // use div.class to limit delegate 
    // split id, pull values from the dom or innerText 
    var el = this; 
    var id = this.id; 
});

來源

2016-06-29 00:45:19 Steve

jQuery的「上」不工作

回答

相關問題