Добавьте onclick событие к недавно добавленному элементу в JavaScript
Я пытался добавить onclick событие к новым элементам, которые я добавил с JavaScript.
Проблема состоит в том, когда я проверяю document.body.innerHTML, я могу на самом деле видеть, что onclick=alert ('вздор') добавляется к новому элементу.
Но когда я нажимаю тот элемент, я не вижу, что окно предупреждений работает. На самом деле что-либо связанное с JavaScript не работает..
вот то, что я использую для добавления нового элемента:
function add_img() {
var elemm = document.createElement('rvml:image');
elemm.src = 'blah.png';
elemm.className = 'rvml';
elemm.onclick = "alert('blah')";
document.body.appendChild(elemm);
elemm.id = "gogo";
elemm.style.position='absolute';
elemm.style.width=55;
elemm.style.height=55;
elemm.style.top=200;
elemm.style.left=300;
elemm.style.rotation=200;
}
Вот то, как я вызываю эту функцию:
<button onclick=add_img()>add image</button>
Теперь изображение тянет отлично в браузере. Но когда я нажимаю на изображение, я не получаю то предупреждение.
6 ответов
.onclick должен быть установлен на функцию, а не на строку. Попробуйте
elemm.onclick = function() { alert('blah'); };
вместо этого.
Не уверен, но попробуйте :
elemm.addEventListener('click', function(){ alert('blah');}, false);
Краткий ответ: вы хотите установить обработчик для функции:
elemm.onclick = function() { alert('blah'); };
Чуть более длинный ответ: вам придется написать еще несколько строк кода, чтобы заставить это работать последовательно во всех браузерах.
Дело в том, что даже немного более длинный код, который мог бы решить эту конкретную проблему в наборе распространенных браузеров, по-прежнему будет иметь собственные проблемы. Так что, если вас не волнует кроссбраузерность, выбирайте самый короткий вариант. Если вам это небезразлично и вы абсолютно хотите, чтобы эта единственная функция работала, используйте комбинацию addEventListener и attachEvent . Если вы хотите иметь возможность широко создавать объекты, добавлять и удалять прослушиватели событий по всему вашему коду и хотите, чтобы это работало во всех браузерах, вы определенно захотите делегировать эту ответственность библиотеке, такой как jQuery.
Я не думаю, что вы можете сделать это таким образом. Вы должны использовать:
void addEventListener(
in DOMString type,
in EventListener listener,
in boolean useCapture
);
Документацию прямо здесь .
У вас есть три разные проблемы. Прежде всего, значения в тегах HTML должны быть заключены в кавычки! Если этого не сделать, это может запутать браузер и вызвать некоторые проблемы (хотя, скорее всего, здесь это не так). Во-вторых, вы должны фактически назначить функцию переменной onclick, как сказал кто-то другой. Это не только правильный способ сделать это в будущем, но и значительно упрощает работу, если вы пытаетесь использовать локальные переменные в функции onclick. Наконец, вы можете попробовать addEventListener или jQuery, jQuery имеет преимущество в виде более приятного интерфейса.
Да, и убедитесь, что ваш HTML проверяет правильность! Это могло быть проблемой.
Вы не можете назначить событие по строке. Используйте это:
elemm.onclick = function(){ alert('blah'); };