如何將css屬性設置為以字符串形式獲取的html元素

Question

我使用javascript和jquery生成html表。 行單元格之一具有錨點元素，我將其作為字符串附加到表var deleteLink = "<a href="#">Delete</a>"

我需要為生成的元素設置事件監聽器，但是不知道如何選擇它

我不能像這樣的字符串傳遞deleteLink

$(deleteLink).on("click", function () {
     //call fucntion
});

我正在嘗試為生成的鏈接設置唯一的ID，但我還需要知道如何首先選擇它們。 請幫忙

這就是我生成html表的方式。 請注意，每個刪除鏈接應僅觸發其所屬的行。

        function appendToDigitalMapTable(docId) {
            tbl = document.getElementById('digitalMapTable');
            var selectedDigitalMap = $("#DigitalMapTypeId option:selected").text();

            var deleteButton = "<a href='#'>Delete</a>";
            addRow(tbl, selectedDigitalMap, deleteButton, docId); 
        }

        function deleteUploadedDoc(docIdAssociatedToRow) {
            console.log("deleteUploadedDoc function is called. docId = " + docIdAssociatedToRow);
            //ajax call to backend function
        }


        function addCell(tr, val) {
            var td = document.createElement('td');
            td.innerHTML = val;
            tr.appendChild(td)
        }

        function addRow(tbl, val_1, val_2, docId) { 2
            var tr = document.createElement('tr');
            var docIdAssociatedToRow = $(tr).data("documentID", docId)
            //selected digitalMapType text
            addCell(tr, val_1);

            //delete row
            addCell(tr, val_2);
            //val_3 is "<a href='#'>Delete</a>"

            //attach eventListener to this element
            $(val_3).on("click", function () {
                deleteUploadedDoc(docIdAssociatedToRow);
            });

            tbl.appendChild(tr)
        }

Answer 1

您可以為錨元素指定一個唯一的ID，然后再使用Jquery的＃選擇器選擇該特定元素。

 var counter = 1; var deleteLink for (var a = 0; a < 2; a++) { deleteLink = "<a href='#' id='myLink" + counter + "'>Delete </a>"; document.body.innerHTML += deleteLink; counter++; } $('#myLink1').on("click", function() { console.log("clicked") }); $('#myLink2').on("click", function() { console.log("other clicked") }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

選項1：從addRow返回該行，然后在該行中找到刪除按鈕以添加事件處理程序：

function addRow(...) {
    ...
    return tr;
}

var tr = addRow(...);
var delbutton = $(tr).find("a")

// not clear if you question is for css or event handler, asks both
delbutton.css("color", "red").click(function() { handleRowDeleteEvent(); });

假設您只有一個按鈕/錨點，可以使用一類

var delbutton = $(tr).find("a.del-button")

（順便說一句，它應該是一個<button type='button'而不是<a>因為它是一個動作，而不是鏈接，所以我在下面使用了<button> ）

選項2：使用事件委托

$("#digitalMapTable").on("click", "a", handleRowDeleteEvent);

同樣，假設您有一個用於刪除而不是用於編輯等的單個按鈕，但是可以通過在創建按鈕時向其添加一個類來輕松地緩解這種情況，例如：

var deleteLink = "<button type='button' class='delete-button'>delete</button>";
$("#digitalMapTable").on("click", "button.delete-button", handleRowDeleteEvent);

選項3：使用onclick=

var deleteLink = "<button type='button' onclick='handleRowDeleteEvent'>delete</button>";

不推薦使用 ，原因有很多，我會讓你去研究

---

如何確保您的按鈕僅在需要的行上起作用-使用this ：

function handleRowDeleteEvent() {
    var btn = $(this);
    var row = btn.closest("tr");
    var docId = row.data("documentID");

    deleteUploadedDoc(docId);
}

或全部一行：

function handleRowDeleteEvent() {
    deleteUploadedDoc($(this).closest("tr").data("documentID"));
}