动态添加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的功能

回答

相关问题