堆棧內存溢出
  簡體   English   中英

動態添加的dom元素不響應jQuery函數

[英]dynamically added dom-elements not responding to jQuery-function

 原文  2017-02-09 01:58:50  3   3    javascript/ jquery/ dom

問題描述

考慮以下代碼： 

  $(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”），則該框的內容應消失。

這或多或少是代碼中最簡單的部分。 但這也是不起作用的一方面。 更准確地說：它適用於原始包裝盒，但不適用於添加的任何包裝盒。 -我不明白為什么會這樣。

3 個解決方案

解決方案1
 4 已采納  2017-02-09 02:01:27

如果要向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中存在的元素連接必要的事件處理程序。

解決方案2
 1  2017-02-09 02:20:24

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

或者，您可以向整個表中添加一個單擊處理程序：

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

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

這是一個可以嘗試的JSFiddle 。

解決方案3
 1  2017-02-09 03:27:34

嘿，這就是我想的答案，

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";
      });
    })();

  };

編輯：而且我什至沒有完全回答這個問題。 您可能希望將事件偵聽器附加到最近的非動態父對象，以便click事件冒泡，您可以捕獲該事件，請檢查注釋中新添加的代碼下的代碼。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用DOM元素調用JS函數 在滾動到視圖中時動態更改DOM元素（性能） 使用jQuery修改文本以在DOM中動態添加元素 關於動態添加到DOM的元素的jQuery $ .each 在jQuery中選擇DOM元素-動態添加 DOM元素不響應jquery jQuery function 未綁定到新添加的 dom 元素 在vue js中獲取DOM元素數組 使用Javascript中的對象存儲DOM元素 使用JQuery為每個動態添加的索引DOM元素獲取JSON響應
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM