Question

我正在努力在页面上的一系列span标记之后动态添加带有click事件处理程序的链接。链接正在添加到页面中，但单击时，事件处理程序不会触发。 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

在您的特定情况下，无需了解动态绑定。在添加元素时看到你处于控制状态，并且你想在那时绑定事件，你可以在附加元素后单独绑定click事件。

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 2

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

为点击添加.live()事件，如下所示：这一切都有效：

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

在1.4.4中看起来有某种Bug，因为你无法将这些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 3

重构您的代码，如：

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/

Answer 4

这个功能应该是这样的：

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

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

Working Demo

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

4 个答案:

DEMO - 创建元素后绑定