时间戳

首页 > 解决方案 > 将侦听器绑定到动态创建的元素

javascript - 将侦听器绑定到动态创建的元素

问题描述

我正在使用引导程序的列表组来创建一行选项卡。当有人单击表中的元素时，它会动态创建一个新选项卡并将其附加到该列表组。

        var newtext = "#"+ticket+" - "+parele.find("td:nth-child(3) strong").html();
        var closebtn = $("<button>").addClass("close ml-2 mr-n2 newlyaddedclose").html("&times;");
        var newdiv = $("<div>").addClass("d-flex justify-content-between").append(newtext).append(closebtn);
        var newa = $("<a>").addClass("list-group-item list-group-item-action").attr("data-toggle","list").attr("href","#ticket"+ticket).attr("id","ticket"+ticket+"-tab").append(newdiv);
        $("#ticketpanel").append(newa);

我遇到的问题是新创建的关闭按钮。我需要绑定一个函数，该函数标识何时单击以处理关闭该选项卡，但它似乎不起作用。在我的示例中，我添加了“newlyaddedclose”类来帮助临时识别新元素，并添加了以下代码来绑定在我的脚本标记顶部定义的函数：

$(".newlyaddedclose").on("click",".close",closebtn).removeClass("newlyaddedclose");

这仍然行不通。当我检查关闭按钮元素时，控制台显示此错误：Framework Event Listeners API Errors: event listener's handler is not a function or empt

我是否使这比需要的更难，或者我做错了什么？我可以简单地在这个元素创建的最后放这个：

$(".close").click(function() { ... });

但是这样做开始使已经创建的选项卡上的事件增加一倍和三倍等。

编辑：这是我的整个脚本块，以消除任何混乱。

    $(function() {
  function closebtn() {
    alert("Close button clicked...");
  }
  $(".ticket-line").click(function() {
    var parele = $(this);
    var ticket = parele.data("tnum");
    // Check to see if ticket is already open in tabs
    if($("#ticket"+ticket).length == 0) {
        // Create tab on ticket panel
        var newtext = "#"+ticket+" - "+parele.find("td:nth-child(3) strong").html();
        var closebtn = $("<button>").addClass("close ml-2 mr-n2 newlyaddedclose").html("&times;");
        var newdiv = $("<div>").addClass("d-flex justify-content-between").append(newtext).append(closebtn);
        var newa = $("<a>").addClass("list-group-item list-group-item-action").attr("data-toggle","list").attr("href","#ticket"+ticket).attr("id","ticket"+ticket+"-tab").append(newdiv);
        $("#ticketpanel").append(newa);
        $(".newlyaddedclose").on("click",".close",closebtn).removeClass("newlyaddedclose");
        // Create DIV with content
        var newdata = $("<div>").addClass("tab-pane").attr("id","ticket"+ticket);
        $("#ticket-tabs").append(newdata);
        $("#ticket"+ticket+"-tab").tab("show");
    } else {
        // Ticket is already open, switch to it instead
        $("#ticket"+ticket+"-tab").tab("show");
    }
  });
})

标签： javascriptjquerybootstrap-4

解决方案

该错误清楚地表明您正在将非函数绑定到事件侦听器。所以错误是说这closeBtn不是一个函数。您的代码，您也定义closeBtn为您尝试附加事件的按钮。因此closeBtn，将 click 事件侦听器更改为您实际尝试调用的函数的名称。如果它是相同的函数名称，请重命名。

你的问题：

var closeBtn = 1;
if (1===1) {
  var closeBtn = 2;
  console.log(closeBtn);
}
console.log(closeBtn);

目前尚不清楚您为什么选择刚刚添加的元素。您可以在创建按钮时附加事件，无需查找元素。

var closebtn = $("<button>")...
closeBtn.on("click", function (){
  console.log('clicked', closeBtn);
});

或者使用事件委托，这样您添加的任何元素都会触发该功能。

$("#ticketpanel").on("click", ".close", function () {
  const closeBtn = $(this);
  console.log('clicked', closeBtn);
});

推荐阅读