Форум Сайтостроение Веб-строительство

Не до конца срабатывает скрипт.

djdiplomat
На сайте с 05.08.2009
Offline
136
djdiplomat
789

Что должно быть: Юзер кликает на кнопку "текст". в форме появляется инпут и доп.кнопка "далее".

Юзер кликает по кнопке далее, всплывает окошко "Клик по кнопке далее"

Что на деле: Юзер кликает по "текст". появляется инпут и кнопка "далее", НО обработчик для кнопки "далее" (.next-step) не срабатывает. Почему? Как исправить?
В чем трабла? 

<p><input type="button" id="buttom-text" name="buttom-text" value="Текст" /></p>

<p><input type="button" id="buttom-tel" name="buttom-tel" value="Телефон" /></p>



<form id="mainset" method="post" action="<? echo $_SERVER['REQUEST_URI'];?>">



<input type="hidden" name="cmd" value="Кнопка отправить">

<input type="submit" name="Submit" value="Сохранить" />



</form>

Обработчик: 


jQuery(document).ready( function() {

	var TextId = 1;

	var TelId = 1;

	alert('Успешно подключен!');

	jQuery('#buttom-text').click(function () { //клик по кнопке текстовое поле

		// alert('Клик по текстовое поле!');

		jQuery('#mainset').before('<p><input id="text'+TextId+'" type="text" name="tel" value="Название"></p><p><input type="button" id="next'+TextId+'" class="next-step" name="buttom-subm" value="Далее" /></p>');

		TextId++;

	});

	

	jQuery('#buttom-tel').click(function () { //клик по телефон

		// alert('Клик по телефон');

		jQuery('#mainset').before('<p><input id="text'+TelId+'" type="text" name="tel" value="Телефон"></p>');

		TelId++;

	});	

	

	

	jQuery('.next-step').click(function () { //клик по кнопке текстовое поле

			alert('Клик по кнопке далее');

	});

	

})
MI
На сайте с 16.07.2008
Offline
74
metadon.info
#1

Может из-за того что в DOM нет ".next-step" когда jQuery(document).ready.

Можно использовать https://api.jquery.com/on/

djdiplomat
На сайте с 05.08.2009
Offline
136
djdiplomat
#2

По ходу так и есть, но как мне быть?

Вы наверное догадались, что в конечном счете у меня будет десятки таких полей и кнопок.

Я когда-то давно с подобным сталкивался, но решение подзабыл.

Там что-то должно быть из области jQuery('body').on("change"

но что и как именно прописать в обработчик, я не могу вспомнить... вот и прошу помощи тут, у гуру....

PS слушайте, может я его неверно применяю? Я так пробовал. Но не катит 

	jQuery('body').on("change", function () { 	

		jQuery('.next-step').click(function () { //клик по кнопке текстовое поле

			alert('Клик по след.шагу');

		});

	});
Хитрости поиска: Используйте неверный SEO: почему мы делаем Смешанные директивы: как Google
MI
На сайте с 16.07.2008
Offline
74
metadon.info
#3

После TextId++; можно сделать jQuery('.next-step').click, то есть после создания .next-step.

Может есть ссылка где это можно посмотеть?

Есть и такой вариант $( "body" ).on( "click", ".next-step", function() {...});

djdiplomat
На сайте с 05.08.2009
Offline
136
djdiplomat
#4
metadon.info:
После TextId++; можно сделать jQuery('.next-step').click, то есть после создания .next-step.

Вот этот вариант подошел! А второй вариант с $( "body" ).on( "click", ".next-step", function() {...}); - нет.

По поводу посмотреть. Это будет простенький плагин для WordPress.

Я вот подумал, может там трабла из за версия jquery? WP 4.1 подключает

/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */

/*! jQuery Migrate v1.2.1 | (c) 2005, 2013 jQuery Foundation, Inc. and other contributors | jquery.org/license */

Хотя нет. Я посмотрел тут http://code.jquery.com/jquery-latest.js тоже v1.11.1 т.е свежак вроде.

---------- Добавлено 02.02.2015 в 16:41 ----------

Слушайте, а вот трабла по методу

После TextId++; можно сделать jQuery('.next-step').click, то есть после создания .next-step.

Если к примеру у меня уже 3 кнопки "далее" и 3 инпута, то прикол

я один раз нажимаю по "любой" кнопке далее и в итоге получаю ТРОЙНОЕ! срабатывание, как будто бы я не один раз кликнул, а три раза!

Руководство по переходу от Настройка событий Google Analytics Результаты эксперимента: использование AdWords
MI
На сайте с 16.07.2008
Offline
74
metadon.info
#5

По идее всё должно работать, вот пример

http://jsfiddle.net/r18o5c21/3/

djdiplomat
На сайте с 05.08.2009
Offline
136
djdiplomat
#6
metadon.info:
По идее всё должно работать, вот пример
http://jsfiddle.net/r18o5c21/3/

Спасибо за пример! Только благодаря ему я нашел свою ошибку!

Я писал

jQuery('body').on("change"

а надо было

jQuery('body').on("click"

СПАСИБО! :):):)

psics
На сайте с 02.04.2009
Offline
130
psics
#7

вы бы просто сделали все что нужно в html, прячете все кроме первого шага. После клика по кнопке, если нужно прячите первый шаг и показываете второй. Ну и так десятки раз)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий