Question

我正在使用AngularJS动态生成大量内容的网站上工作。我需要获取使用jQuery动态生成的元素的属性，但是我无法这样做。我已经发现我需要使用.on方法点击而不是.click。我的问题是在$(this)方法中找到相等的.on。

这是我的代码：

$(document.body).on('click', 'a.card-topic-link' ,function(e) {
    e.preventDefault(); // Prevent default action - this works

    console.log('The click works!'); // This fires and works just fine

    var cardTopicLink = $(this).attr('data-topic-link'); // This is where the problem lies

    console.log(cardTopicLink); // This is undefined
}); // End on click

正如我之前所说，这不起作用，因为.click不适用于动态内容：

$('a.card-topic-link').click(function(e) {
    e.preventDefault(); // Prevent default action

    var cardTopicLink = $(this).attr('data-topic-link');

    console.log(cardTopicLink);
});

我觉得这个问题有一个简单的解决方案，我找不到。这个问题的关键是这是在处理动态内容。

如果您有任何想法，请告诉我。

Answer 1

使用e.currentTarget而不是var cardTopicLink = $(this).attr('data-topic-link');，尝试var cardTopicLink = angular.element(e.currentTarget).attr('data-topic-link');

$(document).ready(function () {
  $(document.body).on('click', 'a.card-topic-link' ,function(e) {
    e.preventDefault(); // Prevent default action - this works
    console.log('The click works!'); // This fires and works just fine

    var cardTopicLink = $(e.currentTarget).attr('data-topic-link'); //   This is where the problem lies

    console.log(cardTopicLink);
  }); // End on click
});

具有类似代码的plunker，触发异步加载的内容 - http://plnkr.co/edit/02rqCrbBVwXiIYff8ktC?p=preview

Answer 2

事实证明，AngularJS在解析时剥离了属性data-topic-link。发生这种情况是因为包含data-topic-link的HTML是作为Angular在ng-repeat中打印的响应的一部分传递的。

我更新了代码，以便AngularJS不需要提供具有此属性的HTML。

当动态生成内容时，jQuery获取clicked元素的属性

2 个答案: