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

如何将css属性设置为以字符串形式获取的html元素

2 个答案: