動態添加DOM元素沒有響應jQuery的功能

考慮下面的代碼：動態添加DOM元素沒有響應jQuery的功能

  $(document).ready(function(){ 
 

 
       var table1 = $("table").eq(0); 
 
       var row_list; 
 
       var rows; 
 
       var x; 
 
       var y; 
 

 
       $("#mybutton").click(function(){ 
 

 
        row_list = table1.find("tr"); 
 
        rows = row_list.length; 
 
        x = $("#field_x").val(); 
 
        y = $("#field_y").val(); 
 

 
        if(x>rows || y>rows){ 
 

 
         var num; 
 
         if(x>y) num=x; 
 
         else num=y; 
 
         var n = num-rows;  
 
         var row; table1.find("tr").eq(0).clone(); 
 

 
         while(1){ 
 
          row = table1.find("tr").eq(0).clone(); 
 
          table1.append(row); 
 
          n--; 
 
          if(n===0) break; 
 
         } 
 

 
         n = num-rows;  
 
         var td; 
 

 
         while(1){ 
 
          td = table1.find("td").eq(0).clone(); 
 
          table1.find("tr").append(td); 
 
          n--; 
 
          if(n===0) break; 
 
         } 
 

 
        } 
 

 
        var text = $("#text").val(); 
 
        var css = $("#css").val(); 
 
        $("table:eq(0) tr:eq(" + (x-1) + ") td:eq(" + (y-1) + ")").text(text).css("color", css); 
 

 
       }); 
 

 

 
       table1.find("td").click(function(){ 
 
        $(this).html(""); 
 
       }); 
 

 

 
      });

  * { 
 
       font: 14px normal Arial, sans-serif; 
 
       color: #000000; 
 
      } 
 
      table { 
 
       margin: 50px auto; 
 
      } 
 
      table, td { 
 
       border: 1px solid #aaa; 
 
       border-collapse: collapse; 
 
      } 
 
      th { 
 
       padding: 10px; 
 
       font-weight: bold; 
 
      } 
 
      td { 
 
       background-color: #eeeeee; 
 
       width: 80px; 
 
       height: 80px; 
 
      } 
 
      table:first-child tr td { 
 
       cursor: pointer; 
 
      } 
 
      td[colspan="4"]{ 
 
       text-align:center; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
      <tbody> 
 
       <tr> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
       </tr> 
 
       <tr> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
       </tr> 
 
       <tr> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
       </tr> 
 
       <tr> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
        <td></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
     <table> 
 
      <thead> 
 
       <tr> 
 
        <th colspan="4">Fill a field:</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>Text: <br/><input type="text" id="text" value=""></td> 
 
        <td>Field X: <br/><input type="text" id="field_x" value=""></td> 
 
        <td>Field Y: <br/><input type="text" id="field_y" value=""></td> 
 
        <td>CSS: <br/><input type="text" id="css" value=""></td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="4"><button id="mybutton">Fill</button></td> 
 
       </tr> 
 
      </tbody> 
 
     </table>

什麼程序操作如下：

用戶可以選擇一個字段通過給出一個x值和一個y值。在此字段中顯示標籤爲「文本」的輸入字段中的內容。 - 程序的這部分工作正常。

如果用戶選擇大於當前行數（列）的x值或y值，則會添加行和列，直到行數/列數等於x-（或y-）字段。 - 這部分程序也可以正常工作。

唯一不起作用的功能如下：如果用戶單擊表中的一個非空字段，表的內容應該回到其自然（空）狀態。

爲此，下面的函數被添加到代碼（見最後幾行中的代碼的JavaScript部分）：

table1.find("td").click(function(){ 
     $(this).html(""); 
});

這段代碼基本上是指：如果用戶單擊在表格中的任何一個盒子（「td」）上，這個盒子的內容應該消失。

這或多或少是代碼中最簡單的部分。但這也是不起作用的一個方面。更確切地說：它適用於原始盒子，但不適用於添加的任何盒子。 - 我不明白它爲什麼這樣表現。

來源

2017-02-09 Tommy

http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements –

如果要動態地添加元素的DOM，並期望得到附加的事件給他們，你應該考慮通過on()功能使用事件代表團：

// This will wire up a click event for any current AND future 'td' elements 
$(table1).on('click', 'td', function(){ 
    $(this).html(""); 
});

只需用它自己的click()只會線了在調用該函數時存在於DOM中的元素的必要事件處理程序。

來源

2017-02-09 02:01:27

完美！非常感謝您的解釋......之前並不知道這件事 – Tommy

將點擊處理程序附加到整個表格可以實現相同的目標。即使添加了新的行和單元格，處理程序仍在桌面上，因此單擊這些新單元格仍然會獲得所需的效果。 –

您在用戶有機會輸入任何數據之前分配事件處理程序。這意味着如果添加了一個額外的行或列，新的<td>需要手動添加事件處理程序。

或者，你可以添加一個單擊處理程序到整個表：

table1.click(function (ev) { $(ev.target).html(''); }

的ev.currentTarget屬性將是<table>元素，因爲這是事件處理程序註冊的元素，但ev.target財產將是您要查找的<td>元素。

這裏是一個JSFiddle試驗。

來源

2017-02-09 02:20:24

嘿這裏就是我想答案可能是，

HTML文件：

<!DOCTYPE html> 
<html lang="de-DE"> 
    <head> 
     <meta charset="UTF-8" /> 
     <style> 
      * { 
       font: 14px normal Arial, sans-serif; 
       color: #000000; 
      } 
      table { 
       margin: 50px auto; 
      } 
      table, td { 
       border: 1px solid #aaa; 
       border-collapse: collapse; 
      } 
      th { 
       padding: 10px; 
       font-weight: bold; 
      } 
      td { 
       background-color: #eeeeee; 
       width: 80px; 
       height: 80px; 
      } 
      table:first-child tr td { 
       cursor: pointer; 
      } 
      td[colspan="4"]{ 
       text-align:center; 
      } 

      .pre-height { 
       min-height: 80px; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <tbody> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td class="pre-height"></td> 
        <td class="pre-height"></td> 
        <td class="pre-height"></td> 
        <td class="pre-height"></td> 
       </tr> 
      </tbody> 
     </table> 
     <table> 
      <thead> 
       <tr> 
        <th colspan="4">Fill a field:</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Text: <br/><input type="text" id="text" value=""></td> 
        <td>Field X: <br/><input type="text" id="field_x" value=""></td> 
        <td>Field Y: <br/><input type="text" id="field_y" value=""></td> 
        <td>CSS: <br/><input type="text" id="css" value=""></td> 
       </tr> 
       <tr> 
        <td colspan="4"><button id="myButton">Fill</button></td> 
       </tr> 
      </tbody> 
     </table> 

     <script src="jquery.min.js"></script> 
     <script src="jack.js"></script> 

    </body> 
</html>

JACK.JS文件：

window.onload = function() { 

'use strict'; 

/** 
* Appends 'n' number of rows to the table body. 
* 
* @param {Number} n - Number of rows to make. 
*/ 
var makeRows = function(n) { 
    let tbody= document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0], 
     tr = document.querySelector("table:first-of-type tbody tr"); 

    for (let i = 0; i < n; i++) { 
     let row = Node.prototype.cloneNode.call(tr, true); 
     tbody.appendChild(row); 
    } 
}; 

/** 
* Appends 'n' number of cells to each row. 
* 
* @param {Number} n - Number of cells to add to each row. 
*/ 
var makeColumns = function(n) { 
    let addNCells = (function(n, row) { 
     for (let i = 0; i < n; i++) { 
      let cell = Node.prototype.cloneNode.call(td, true); 
      row.appendChild(cell); 
     } 
    }).bind(null, n); 

    let tbody= document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0], 
     td = document.querySelector("table:first-of-type tbody tr td"), 
     rows = document.querySelectorAll("table:first-of-type tbody tr"); 

    rows.forEach(function(row) { 
     addNCells(row); 
    }); 
}; 



    document.getElementById("myButton").addEventListener("click",() => { 
     let x = document.getElementById("field_x").value, 
      y = document.getElementById("field_y").value; 

     makeColumns(x); 
     makeRows(y); 
    }); 


    /** 
    * Newly added code 
    */ 
    (function() { 
     let table = document.querySelector("table"); 
     // We will add event listener to table. 
     table.addEventListener("click", (e) => { 
      e.target.innerHTML = ""; 
      e.target.style.backgroundColor = "orange"; 
     }); 
    })(); 

    };

編輯：我甚至沒有答案這個問題完全。您可能希望將事件偵聽器附加到最近的非動態父級，以便點擊事件會冒泡，並且您可以捕獲該事件，並在新添加的代碼的註釋下檢查代碼。

來源

2017-02-09 03:27:34 hungryWolf

大部分情況下，它並不完整，但我認爲這部分可能是關鍵的一部分，我用香草，乾淨，乾淨 – hungryWolf

動態添加DOM元素沒有響應jQuery的功能

回答

相關問題