Question

我有这样一个锚：

windowcontent = addField("<a  href='#info' id='myid' onclick='createList(" + parts + ")'>Info</a>");

其中parts是一个复杂的对象。因为像这样它总是让我错误，我读到我应该使用createElement。所以我确实喜欢这个：

var o = document.createElement('a');
o.setAttribute('href', 'info');
o.onclick = createList(parts);
var t = document.createTextNode('Informazioni aggiuntive');
o.appendChild(t);
windowcontent = addField(o.outerHTML);

但在o.outerHTML中这样我就不喜欢onclick=".."所以当我点击我的链接时没有任何反应。

我该怎么做？

Answer 1

如果你不介意jQuery（并且OP说他们不这样做），你可以这样做：

// Create an anchor element, using an optional set of properties
var $anchor = $("<a>", { href: '#info', 'class':'myclass', 'data-parts': parts, text: 'Info'});

// When added to the DOM results in <a href="#info" class="myclass" data-parts="test,anothertest">Info</a>
$(document).append($anchor);

// create a delegated click handler for the anchors
$(document).on('click', '.myclass', function(){
    // get the parts stored in the data- attribute
    var parts = $(this).data('parts');
    // create the parts
    createList(parts);
});

快速模型：

https://jsfiddle.net/TrueBlueAussie/1ca3c4cp/

说明：

我假设您需要多个项目并使用类而不是ID，因为ID必须在页面上唯一。浏览器对ID使用快速查找字典，这些只允许针对每个ID值存储一个元素。
此示例使用委托事件，该事件附加到添加元素的不变的祖先元素。在这种情况下，我使用document作为默认值。委托事件在事件时应用选择器，因此处理注册事件时不存在的元素。
我只将所需数据作为锚点的属性注入，以便以后检索。使用大量的锚点，这也会比添加内联的onclick事件处理程序产生更小的HTML。
您应该避免通常使用jQuery来使用内联事件处理程序。它们绕过了jQuery中的一些额外事件功能，并将事件注册与事件处理程序代码分开（对维护不利）。

Answer 2

o.onclick = createList(parts);

调用createList。尝试使用Function.prototype.bind()引用createList而不是调用createList，将this设置为o，设置传递给parts的参数

o.onclick = createList.bind(o, parts);

如何创建一个锚，添加一个onclick＆＃39;函数并转换为字符串

2 个答案:

快速模型：

说明：