奇怪的Javascript行为

我使用JQuery追加图像，像这样：奇怪的Javascript行为

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

，我点击 “图像event_2”，那么 “这个” 必须参照 “图像event_2”

来源

2012-03-06 Test Test

你能否确认'highlight'是一个全局函数？ – 2012-03-06 12:47:30

此外，请考虑将“click”事件委托给“＃event_list_main”元素...... – 2012-03-06 12:49:15

尝试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);

来源

2012-03-06 12:43:49 ThiefMaster

这样会更清晰：'var img = $（''）.attr（{class：'listed_event' ，id：'event_'+ event_counter，'data-count'：event_counter，src：'final_tutorial_buttons/event.png'}）。click（highlight）.appendTo（'＃event_list_main'）'。当然，有几条路线。 – 2012-03-06 12:49:20

模板更清晰。 – 2012-03-06 12:50:02

这不是意外的行为，你不及格的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");

请参阅this职位更多有关如何call()，apply()和this。

来源

2012-03-06 12:45:08 Aidiakapi

奇怪的Javascript行为

回答

相关问题