Как добавить событие в форму, которая на js, а не html?

Question

[Игорь]

Здравствуйте
Есть простенький лендинг
нужно повесить яндекс цель на нажатие кнопки
форма написана через js, из которого я знаю только alert()

<form id="form" action="">
					<input type="text" name="name" placeholder="Ваше имя">
					<input type="text" name="tel" placeholder="Ваш номер телефона">
					<div class="form_bottom">
						Заказать звонок <!--кнопка-->
					</div>
				</form>

Не подскажите, как повесить это событие сразу на див(кнопку)?
просто добавление в див

onclick="yaCounterXXXXXX.reachGoal('zakazatZvonok'); return true;"

есcно ничего не дает

если слишком простой и платиновый вопрос, то хотя бы направление задать куда разбираться

Answer 1

[Алексей Картушин]

Если нужно повесить событие на какой либо элемент в js, сначала нужно сделать этот самый элемент и потом вставить в него данные (Разметку), например:

var myBtn = '<button id="btn"> click it </button>';
var myElement = document.createElement('div');
myElement.innerHTML = myBtn ;

Затем можно будет захватывать этот элемент из js и вешать на него события:

var fooBtn = myElement.getElementById('btn');
fooBtn.addEventListener('click', function(){
 alert();
})

А если эта форма у вас уже храниться в памяти где-то то просто обратитесь к ней как я писал выше myForm.querySelector('form_bottom');
и вешайте событие.

Через jquery можно сделать всё ещё легче, если разметка у вас храниться как строка то её можно обернуть в $ и получить уже готовый jquery элемент, например:

var myDiv = $('<div> <button> click it </button> </div>');

Затем можно вешать события:

myDiv.find('button').on('click', function(){
 alert();
});

Если же это какой-то элемент в памяти то так-же можно его обернуть в тег и повесить событие, например:

var myDiv = document.createElement('div');
myDiv.append('button');
$(myDiv).on('click', function(){
 alert();
});

Comments

[Игорь]

всем спасибо, разобрался