Question

我将元素插入到填充了我从Web服务检索到的一些数据的DOM中。我附加了一个内联单击事件来调用函数。问题是我没有获得对调用该函数的元素的引用。

追加新元素的代码：

$.getJSON("/search?" + $(this).serialize(), function (data) {
  if (data != null) {
    $.each(data, function (index, video) {
      resultItem.append("<li ><a onclick='loadNewVideo(e)' href='play?video=" + video.video_id + "'>" + "<img width='185' src='" + video.defaultImg + "'/>" + "<span class='video_left_title'>" + video.song.song_name + "<h6 class='artist_name'>" + video.artist.artist_name + "</h6></span></a>");
    });
  }
});

功能：

function loadNewVideo (e) {
     e.preventDefault();
     alert($(this).attr("href"));
}

Answer 1

您可以将所有a的点击次数委托给resultItem，而不是使用内联事件处理程序：

// Call this only once, when resultItem is already in the DOM
// (for example, on a document.ready callback)
resultItem.on('click', 'a', loadNewVideo);

// Proceed with your current code (slightly modified):
function loadNewVideo (e) {
     e.preventDefault();
     alert($(this).attr("href"));
}

$.getJSON ("/search?" + $(this).serialize(),function (data) {
    if (data != null) {
        $.each (data,function (index,video) {
            resultItem.append("<li ><a href='play?video=" + video.video_id +"'>"
               + "<img width='185' src='"+video.defaultImg +"'/>"
               + "<span class='video_left_title'>"+ video.song.song_name
               + "<h6 class='artist_name'>"+video.artist.artist_name
               + "</h6></span></a>");
         });
    }
});

Answer 2

内联onclick处理程序不会通过jQuery，这就是您无法访问的原因。

您可以将其留在那里并更改处理程序：

function loadNewVideo(e) {
  e.preventDefault();
  alert($(e.target).attr("href"));
}

或者，更优选地，不使用内联处理程序。只需为a元素提供video（或其他）类，并使用jQuery安装处理程序：

...
resultItem.append("<li><a class='video' href=...'")
...

// and elsewhere
$(resultItem).on('click', 'a.video', loadNewVideo);

Answer 3

jQuery的事件对象允许我抓住文档所称的＆＃39; current DOM element within the event bubbling phase＆＃39;。

var originatingElement = event.currentTarget;

获取对使用JQuery调用内联函数的元素的引用

3 个答案: