代码之家 › 专栏 › 技术社区 › Drew Noakes

捕获以编程方式添加到DOM的<a>元素上的click事件

javascript-events dom jquery javascript

Drew Noakes · 技术社区 · 14 年前

div . 代码是这样的:

$.each(data, function (idx, item) {
    var a = document.createElement("a");
    a.innerText = item.name;
    a.href = "#";
    // TODO set handler for click event
    d.appendChild(a);
    d.innerHTML += "<br/>";
});

这样可以正常工作,并显示链接。但是,我想在单击链接时执行一些操作。 item 有一些其他属性,我将需要在点击处理程序,所以我想关闭他们。以下是处理程序的定义:

    // defined in loop as a closure
    var clickHandler = function() {
        $('#siteId').value = item.siteId; // closed over this property
        $('#siteName').value = item.name; // and this one
        return false;
    };

我尝试了几种方法来为click事件提供这个处理程序。首先:

    a.onclick = clickHandler;

其次:

    a.addEventListener("click", clickHandler, true);

我也试过了 mouseup , mousedown 事件,但它们也不起作用。

我看到的行为是浏览器导航到 # 锚定(它附加到URL)。

这是怎么回事?另外,是否有一个jQuery解决方案在浏览器间更健壮?

4 回复 | 直到 14 年前

bobince 14 年前

d.innerHTML += "<br/>";

那是你的问题。 从来没有 innerHTML+= 任何东西 <a>

HTML不是浏览器中页面数据的最终存储;您不能直接编辑它。您只能将文档内容的一部分序列化为新的HTML(可能看起来与解析页面时放入的HTML不太一样),并将HTML解析为全新的对象。

因此,请继续使用DOM方法:

d.appendChild(document.createElement('br'))

旁白:

a.innerText = item.name;

这是一个IE扩展,不支持任何地方。你可以用它作为标准的后备 textContent 属性不受支持,或者,为了获得最大的兼容性,只需使用plain old document.createTextNode() 把它附加到 a .

因为您似乎正在使用jQuery,所以请使用 text() 做这个,而且 click()

Nick Craver 14 年前

您可以使用jQuery执行以下操作:

$.each(data, function (idx, item) {
  $("<a />", { text: item.name, href: '#', click: clickHandler })
     .appendTo(d).after('<br />');
});

它使用 $(html, props) 作为元素的创建方法,设置它的文本和 href .appendTo() 将其添加到 d <br /> 跟随它使用 .after() .

casablanca 14 年前

有没有一个jQuery解决方案可以跨浏览器更健壮?

您可以从现有DOM元素中获取jQuery对象,然后以标准方式绑定click处理程序:

$(a).click(clickHandler);

val 方法,而不是指定给 value 属性:

var clickHandler = function() {
    $('#siteId').val(item.siteId); // closed over this property
    $('#siteName').val(item.name); // and this one
    return false;
};

RMorrisey 14 年前

使用 jQuery.live

http://api.jquery.com/live/

这将正确地附加处理程序,即使在定义事件处理程序之后将元素添加到DOM中