jQuery在动态生成内容时获取被点击元素的属性

Question

I am working on a site where a lot of content is generated dynamically using AngularJS. I need to get the attribute of an element that is dynamically generated using jQuery, but I am having trouble doing so. I have already figured out that I need to use the .on method to click rather than .click . My issue is finding the equivalent of $(this) within the .on method.

Here is my code:

$(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

As I stated before, this does not work as the .click does not work for dynamic content:

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

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

    console.log(cardTopicLink);
});

I feel like there is a simple solution to this problem that I am having trouble finding. The key to this issue is that this is dealing with dynamic content.

Let me know if you have any ideas.

Answer 1

use e.currentTarget, instead of var cardTopicLink = $(this).attr('data-topic-link'); , try 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 with similar code, firing on async loaded content - http://plnkr.co/edit/02rqCrbBVwXiIYff8ktC?p=preview

Answer 2

It turns out that AngularJS was stripping out the attribute data-topic-link as it was parsed. This was happening because the HTML that contained the data-topic-link was passed as a part of the response that Angular was printing in an ng-repeat .

I updated the code so that the HTML with this attribute did not need to be served by AngularJS.