Javascript - onclick

Question

я впервые пишу здесь, но, черт возьми, я использую этот сайт для поиска проблем постоянно: P Ну, теперь у меня возникла собственная проблема, которую я не могу легко найти в поиске по Google,и, поиграв с ним около 2 часов, я наконец решил опубликовать вопрос и посмотреть, что вы, ребята, думаете.

Что я пытаюсь сделать здесь - это иметь кнопку, которая появляется над элементом divкогда вы наводите курсор на него, при нажатии открывается панель редактирования.Кнопка отображается над div правильно, но по какой-то причине я не могу заставить работать функцию onclick, чтобы спасти мою жизнь.Вот код, с которым я работаю.Если этого недостаточно, пожалуйста, дайте мне знать, и я добавлю немного больше соуса.: P

function place_widget(name, properties){
//bbox
var pleft = properties[0];
var ptop = properties[1];
var width = properties[2];
var height = properties[3];
var pright = pleft + width;
var pbottom = pleft + height;
var bbox = [pleft, ptop, pright, pbottom];
boxes[name] = bbox;

//ID's
var id = 'widget_' + name;
var editspanid = id + "_editspan";
var editbuttonid = id + "_editbutton";
var editpaneid = id + "_editpane";

//Creating Elements
var div = "<div id='" + id + "' class='widget' onmouseover='widget_hover(event);' onmouseout='widget_out(event);'>";
var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit;' src='../images/edit_button.png'></a>";
var editspan = "<span id='" + editspanid + "' class='editspan'>" + editbutton + "</span>";
var editpane = "<span id='" + editpaneid + "' class='editpane'>:)</span>";
div += editspan + editpane + "</div>";
body.innerHTML += div;

//Configuring Elements
var editspanelement = document.getElementById(editspanid);
var editbuttonelement = document.getElementById(editbuttonid);
editbuttonelement.onclick = alert; //Does nothing.
var editpaneelement = document.getElementById(editpaneid);
var mainelement = document.getElementById('widget_' + name);
mainelement.style.left = (pleft + leftmost) + "px";
mainelement.style.top = (ptop + topmost) + "px";
mainelement.style.width = width;
mainelement.style.height = height;
getContentsAJAX(name);
}

Извините за уродливый код: P У кого-нибудь есть идеи, почему не работает функция onclick?

Также немного дополнительной информации: если я открою firebugи вставьте:

document.getElementById('widget_Text_01_editbutton').onclick = alert;

Когда я нажимаю на кнопку, я получаю:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "native frame :: <unknown filename> :: <TOP_LEVEL> :: line 0" data: no]

Я не совсем уверен, что это значит от руки.

Спасибо!

Answer 1

Начните с изменения этого значения:

editbuttonelement.onclick = alert; //Does nothing.

на следующее:

editbuttonelement.onclick = function() {alert("Got a click");};

, а затем измените это значение:

var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit;' src='../images/edit_button.png'></a>";

на следующее:

var editbutton = "<a id='" + editbuttonid + "' href='#'><img onclick='toggleEdit();' src='../images/edit_button.png'></a>";

На что вы нажимаете?Изображение или ссылка или промежуток?Вы знаете, что получает событие клика?

Answer 2

Можете ли вы попробовать изменить:

<img onclick='toggleEdit;' src='../images/edit_button.png'>

до:

<img onclick='toggleEdit();' src='../images/edit_button.png'>

Кроме того, является ли "оповещение" функцией, которую вы написали?

Answer 3

document.getElementById('widget_Text_01_editbutton').onclick = alert;

вызывает illegal invocation, потому что он пытается установить this на что-то другое (элемент), чем window внутри alert.

alert.call( {} )
//TypeError: Illegal invocation

alert.bind( window ).call( {} )
//works

Так что либо:

document.getElementById('widget_Text_01_editbutton').onclick = alert.bind( window );

или даже лучше, так как выше будет работать только в некоторых браузерах:

document.getElementById('widget_Text_01_editbutton').onclick = function(){alert();};