Question

我正在动态创建一个超链接元素并设置它的属性类，所以单击它时会触发一个函数。

以下是动态创建超链接元素的代码：

editLink = document.createElement("a");
editLink.setAttribute("class", "edit-button");

这是点击链接时应该发生的事情：

$(document).ready(function(){

    $('.edit-button').click(function(event){
    event.preventDefault(); 
    var docHeight = $(document).height();
    var scrollTop = $(window).scrollTop();
    $('.overlay').show().css({'top': scrollTop + 'px'});
    });
});

但点击它时没有任何反应。提前谢谢你:)

Answer 1

不确定您是否使用正文附加已创建的元素。我做了这个改变，它工作正常

knockout.js

jsfiddle

Answer 2

试试这个

var editLink = document.createElement("a");
editLink.setAttribute("class", "edit-button");
editLink.innerHTML  = 'click';
document.body.appendChild(editLink);

$(function() {
    $('.edit-button').on('click',function(event){
    alert('clicked');
    event.preventDefault(); 
    var docHeight = $(document).height();
    var scrollTop = $(window).scrollTop();
    $('.overlay').show().css({'top': scrollTop + 'px'});
    });
});

https://jsfiddle.net/s718ay3g/1/

Answer 3

Event Delegation就是这样做的。

当您直接向.edit-button添加事件时，在加载文档时，浏览器会将该事件侦听器仅附加到当前存在的.edit-button元素。对于具有相同类的新创建的元素，它不会自动执行。

您可以做的是将事件的biding和listener代码放在函数中，并在每次向DOM添加新元素时调用它。但这被认为是一种不好的做法。

欢迎，活动代表团。

我们的想法是将事件附加到非动态的父/祖先元素，并且仅当事件目标是您指定的元素时才触发事件（与某种类型的选择器匹配，如类或ID）。

在您的情况下，更新的事件绑定代码将如下所示。

$(document.body).on("click", ".edit-button", function(){
    //whatever you want to do in here.
});

然后，您可以像继续那样向新创建的元素添加类...

var editLink = document.createElement("a");
editLink.setAttribute("class", "edit-button");

该活动仍然有效。

这样您只需附加一次事件。

如果您的按钮/链接将包含在容器div或类似内容中，请将事件附加到该容器而不是正文。

$(".class-of-the-container").on("click", ".edit-button", function(){
    //whatever you want to do in here.
});

SetAttribute动态创建元素的类 - Javascript

3 个答案: