0

我正在将元素插入到填充有我从 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"));
}
4

3 回答 3

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>");
         });
    }
});
于 2013-02-14T01:55:35.250 回答
0

内联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);
于 2013-02-14T01:47:20.363 回答
0

jQuery 的事件对象让我能够获取文档所称的“事件冒泡阶段中的当前 DOM 元素”。

var originatingElement = event.currentTarget;
于 2017-06-14T18:29:10.500 回答