为什么我的点击事件处理程序没有为动态添加的链接触发？

Question

我正在努力在页面上的一系列跨度标签之后动态添加带有点击事件处理程序的链接。该链接正在添加到页面中，但单击时事件处理程序未触发。 Web 控制台中没有记录错误。我确信我在下面的代码中遗漏了一些明显的东西：

function changeClicked (e) {
    e.preventDefault();
    console.log('should work');
}

function initChangeOwner() {
    var changeLink = $('<a />', {
        href: '#',
        text: 'change',
        'class': 'changeLink',
        click: changeClicked
    });

    var licenseFor = $('[id*="LicenseFor"]').after(changeLink);
}

$(document).ready(function () {
    initChangeOwner();
    // other inits
});

为什么我的点击事件处理程序没有触发？对于那些喜欢摆弄的人，我已经设置了an example on jsFiddle。

_{* 这是一个使用 jQuery 1.4.1 的旧应用程序。不幸的是，现在不是将引用更新到新版本的时候。}

Answer 1

通常我会说使用.on()，但看起来你使用的是 jQuery 1.4.4。

像这样为点击添加一个.live() 事件：一切正常：

$('.changeLink').live('click', function (e) {
   changeClicked(e); 
});

看起来在 1.4.4 中存在某种错误，因为您无法将这些 click / onclick 属性添加到元素中。 （附带说明：：你不想在元素上使用click/onclick/onmouseover/etc，无论如何，每个单独（每个元素）都会创建一个脚本文件在 IE 中（降低性能）。看起来你的原始代码在更高版本的 jQuery 中也可以工作，只是在 1.8 中尝试过很好。

另外，在你的 changeClicked() 函数中使用return false;（它会同时为你执行stopPropagation & preventDefault，之后的任何东西都不会运行，以及锚点的href="#" 属性。

function changeClicked(e) {
    console.log('here we are');

    return false; // stops link - preventDefault & stopPropagation
    console.log('it WONT get here');
}

jsFiddle DEMO

Answer 2

在您的特定情况下，无需花心思在动态绑定上。 看到你在添加元素时可以控制并且你想在那个时候绑定事件你可以在附加元素后单独绑定你的点击事件。

function initChangeOwner() {
    var changeLink = $('<a />', {
        href: '#',
        text: 'change',
        'class': 'changeLink'
    });

    var licenseFor = $('[id*="LicenseFor"]').after(changeLink);

    // Now the elements exist and you can bind the click event using the 'changeLink' class as a selector.
    $(".changeLink").click(function(event){changeClicked(event);});

}

DEMO - 创建元素后绑定

Answer 3

函数应该是这样的：

function initChangeOwner() {
  $('[id*="LicenseFor"]').each(function(index){
    var changeLink = $('<a />', {
    href: '#',
    text: 'change',
    'class': 'changeLink',
     click: changeClicked
   });

    $(this).after(changeLink);
  });
}

Working Demo

Answer 4

像这样重构你的代码：

function initChangeOwner() {
    $('[id*="LicenseFor"]').each(function(){
        var changeLink = $('<a />', {
            href: '#',
            text: 'change',
            'class': 'changeLink',
            click: changeClicked
        });
       $(this) .after(changeLink);
    });
}

http://jsfiddle.net/xUjTd/48/这工作正常

我认为问题在于首先将一个事件附加到 changeLink，然后将其多次插入 DOM。 http://jsfiddle.net/xUjTd/60/