Question

我正在使用JQuery来附加图像，如下所示：

$('#event_list_main').append('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" onclick="highlight();" />');

我为我创建和追加的每个图像分配了一个highlight函数！问题是突出显示功能不会执行。

//Highlight function
function highlight()
{
    var indicator = $(this).data("count");
    alert(indicator);

}

“这个”部分似乎不起作用。我希望这可以引用创建的每个事件。

例如，如果我创建了3个事件

event_1 event_2 event_3

然后点击“image event_2”，然后“this”必须引用“image-event_2”

Answer 1

尝试onclick="highlight.call(this);"

然而，正确附加事件处理程序将更多更清晰：

var img = $('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" />');
img.on('click', highlight);
$('#event_list_main').append(img);

甚至更具可读性：

var img = $('<img/>', {
    'class': 'listed_event',
    id: 'event_' + event_counter,
    src: 'final_tutorial_buttons/event.png'
}).height(50).width(50).data('count', event_counter).on('click', highlight);
$('#event_list_main').append(img);

Answer 2

这不是意料之外的行为，您没有传递this值。但是你期待它，因为jQuery会自动为你做这件事。

这是一个简单的解决方法：

$('#event_list_main').append('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" onclick="highlight.call(this);" />');

尽管将它们全部替换为以下内容会更好：

$('<img class="listed_event" id="event_' +
     event_counter + '" data-count="' +
     event_counter + '" src="final_tutorial_buttons/event.png" height="50" width="50" />')
     .click(highlight).appendTo("#event_list_main");

有关call()，apply()和this的详细信息，请参阅this帖子。

奇怪的Javascript行为

2 个答案: