Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблемы с change, у select созданным через before (https://javascript.ru/forum/jquery/44866-problemy-s-change-u-select-sozdannym-cherez-before.html)

copydoc 04.02.2014 23:01
Проблемы с change, у select созданным через before
 
День добрый!
Есть php файл и обработчик.


Проблема с change, а конкретно в том, что обработчик на ура обрабатывает селекты, которые созданы в пхп файле, но
в упор не видит те селекты, которые я создаю
при помощи js 
$('#subm1').before('<div id="level_4" class="level"><select id="rt1" class="divtype"><option value="1">Пункт1</option><option value="2">Пункт2</option><option value="3">Пункт3</option></select></div>');


(т.е он селект выводит, но change конкретно с этим элементом не пашет хотя по всем статьям должен пахать.

php код:


<!DOCTYPE html>
	<head>
		<title>autoshop</title>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
		<link rel='stylesheet' href='css/style.css' type='text/css' />
		<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
		<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
		<script type='text/javascript' src='js/obrabotka.js'></script>

	</head>
	<body>
<div id="step2" > 
		
	<form method="POST" action="" id="sortContainer">
 
			
		<div id="level_1" class="level">
			<div id="main_set_1" class="main_set" >		
				<p>Ширина <input type="text" name="" id="reg_inp" /> Высота <input type="text" name="" id="reg_inp" /></p>
			<div class="clear">
				<div id="ll_1" class="ll">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
					<div class="parametry">	
						<p>Парам <input type="text" name="" class="width_inp" />
						<p>Парам <input type="text" name="" class="heigh_inp" />
						<p>Парам <input type="text" name="" class="fon_inp" />
						<p>Парам <input type="text" name="" class="padding_inp" />
					</div>
				</div>
				<div id="cc_1" class="cc">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
				<div id="rr_1" class="rr">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
			</div>
			<div class="clear"></div>
			<a href="#" class="del" >Удалить</a>
		</div>
		
		<div id="level_2" class="level">
			<div id="main_set_2" class="main_set" >		
				<p>Ширина <input type="text" name="" id="reg_inp" /> Высота <input type="text" name="" id="reg_inp" /></p>
			</div>
			<div class="clear">
				<div id="ll_2" class="ll">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
				<div id="cc_2" class="cc">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
				<div id="rr_2" class="rr">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
			</div>
			<div class="clear"></div>
			<a href="#" class="del">Удалить</a>
		</div>
		
		<input id="subm1" name="submits" type="submit" value="Отправить">
	</form>
	
	<div id="navi">
		<p><a href="#" id="add">Добавить</a> </p>
		
		<div id="step1" style="display: block;" >
			<img src="img/1div.jpg" id="s1" class="s1" border="1"/>
			<img src="img/2div.jpg" id="s2" class="s2" border="1"/>
			<img src="img/3div.jpg" id="s3" class="s3" border="1"/>
		</div>
	
	</div>
</div> 
</body>
</html>

обработчик:
$(document).ready(function() {
   // alert('!');

	$('img').click(function () { //клик по картинке
		var currentClass = $(this).attr("class"); // заносим в переменную класс картинки
		// alert(currentClass);
		if (currentClass == "s1") {
		
			$('#subm1').before('<div id="level_4" class="level"><select id="rt1" class="divtype"><option value="1">Пункт1</option><option value="2">Пункт2</option><option value="3">Пункт3</option></select></div>');
			
			
		} else if (currentClass == "s2") {
			alert("s2"+currentClass);
		}
 	});



	$(".divtype").change(function () { // отслежеваем изменения в выпадающем списке'
	
		alert('сработало! 2');
		var currentSelect = $(this).val(); // заносим в переменную новый выбор
		if ($('.ll > select:focus').size() == 1) {
			var ClassPozition = "_ll"; // помещаем в ClassPozition префикс который будет обозначать положение полей input
		} else if ($('.cc > select:focus').size() == 1) {
			var ClassPozition = "_cc";
		} else if ($('.rr > select:focus').size() == 1) {
			var ClassPozition = "_rr";			
		}; 
		if (currentSelect == 1) {
			$('select:focus + div').html(''); // удаляем прошлую активную форму
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /></div>');
		}
		else if (currentSelect == 2) {
			$('select:focus + div').html('');
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /><br />Фон <input type="text" name="fon'+ClassPozition+'" id="reg_inp" /><br /></div>');
		}
		else if (currentSelect == 3) {
			$('select:focus + div').html('');
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /><br /> Фон <input type="text" name="fon'+ClassPozition+'" id="reg_inp" /><br /></div>');
		}
	});


}); // конец ready

рони 04.02.2014 23:56
copydoc,
откройте для себя on для отслеживания всех элементов с нужным классом
$(".divtype").change(function () 
$("body")("change",".divtype",function (){})

copydoc 05.02.2014 00:41
Я прошу прощения за свою непонятливость...

Можно подробнее?
Если так сделать, то чет результат тот же... (даже те селекторы, что есть в слепую зону попали) или я что-то понял неверно? (но ошибки в синтаксисе нет. я проверял)
$("body")("change",".divtype",function () { // отслежеваем изменения в выпадающем списке'
	
		alert('сработало! 2');
		var currentSelect = $(this).val(); // заносим в переменную новый выбор
		if ($('.ll > select:focus').size() == 1) {
			var ClassPozition = "_ll"; // помещаем в ClassPozition префикс который будет обозначать положение полей input
		} else if ($('.cc > select:focus').size() == 1) {
			var ClassPozition = "_cc";
		} else if ($('.rr > select:focus').size() == 1) {
			var ClassPozition = "_rr";			
		}; 
		if (currentSelect == 1) {
			$('select:focus + div').html(''); // удаляем прошлую активную форму
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /></div>');
		}
		else if (currentSelect == 2) {
			$('select:focus + div').html('');
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /><br />Фон <input type="text" name="fon'+ClassPozition+'" id="reg_inp" /><br /></div>');
		}
		else if (currentSelect == 3) {
			$('select:focus + div').html('');
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /><br /> Фон <input type="text" name="fon'+ClassPozition+'" id="reg_inp" /><br /></div>');
		}
	});

рони 05.02.2014 01:39
copydoc,
поищите пропавшие теги ...
<!DOCTYPE html>
<html>
	<head>
		<title>autoshop</title>
		<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
		<link rel='stylesheet' href='css/style.css' type='text/css' />
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
		<script>
            $(document).ready(function() {
   // alert('!');

	$('img').click(function () { //клик по картинке
		var currentClass = $(this).attr("class"); // заносим в переменную класс картинки
		// alert(currentClass);
		if (currentClass == "s1") {

			$('#subm1').before('<div id="level_4" class="level"><select id="rt1" class="divtype"><option value="1">Пункт1</option><option value="2">Пункт2</option><option value="3">Пункт3</option></select></div>');


		} else if (currentClass == "s2") {
			alert("s2"+currentClass);
		}
 	});



	$('body').on("change",".divtype",function () { // отслежеваем изменения в выпадающем списке'

		alert('сработало! 2');
		var currentSelect = $(this).val(); // заносим в переменную новый выбор
		if ($('.ll > select:focus').size() == 1) {
			var ClassPozition = "_ll"; // помещаем в ClassPozition префикс который будет обозначать положение полей input
		} else if ($('.cc > select:focus').size() == 1) {
			var ClassPozition = "_cc";
		} else if ($('.rr > select:focus').size() == 1) {
			var ClassPozition = "_rr";
		};
		if (currentSelect == 1) {
			$('select:focus + div').html(''); // удаляем прошлую активную форму
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /></div>');
		}
		else if (currentSelect == 2) {
			$('select:focus + div').html('');
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /><br />Фон <input type="text" name="fon'+ClassPozition+'" id="reg_inp" /><br /></div>');
		}
		else if (currentSelect == 3) {
			$('select:focus + div').html('');
			$('select:focus').after('<div class="parametry">Ширина <input type="text" name="size_width'+ClassPozition+'" id="reg_inp" /><br />Высота <input type="text" name="size_height'+ClassPozition+'" id="reg_inp" /><br /> Фон <input type="text" name="fon'+ClassPozition+'" id="reg_inp" /><br /></div>');
		}
	});


}); // конец ready



        </script>

	</head>
	<body>
<div id="step2" >

	<form method="POST" action="" id="sortContainer">


		<div id="level_1" class="level">
			<div id="main_set_1" class="main_set" >
				<p>Ширина <input type="text" name="" id="reg_inp" /> Высота <input type="text" name="" id="reg_inp" /></p>
			<div class="clear">
				<div id="ll_1" class="ll">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
					<div class="parametry">
						<p>Парам <input type="text" name="" class="width_inp" />
						<p>Парам <input type="text" name="" class="heigh_inp" />
						<p>Парам <input type="text" name="" class="fon_inp" />
						<p>Парам <input type="text" name="" class="padding_inp" />
					</div>
				</div>
				<div id="cc_1" class="cc">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
				<div id="rr_1" class="rr">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
			</div>
			<div class="clear"></div>
			<a href="#" class="del" >Удалить</a>
		</div>

		<div id="level_2" class="level">
			<div id="main_set_2" class="main_set" >
				<p>Ширина <input type="text" name="" id="reg_inp" /> Высота <input type="text" name="" id="reg_inp" /></p>
			</div>
			<div class="clear">
				<div id="ll_2" class="ll">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
				<div id="cc_2" class="cc">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
				<div id="rr_2" class="rr">
					<select class="divtype">
						<option value='1'>punkt1</option>
						<option value='2'>punkt2</option>
						<option value='3'>punkt3</option>
						<option value='4'>punkt4</option>
					</select>
				</div>
			</div>
			<div class="clear"></div>
			<a href="#" class="del">Удалить</a>
		</div>
        </div>
		<input id="subm1" name="submits" type="submit" value="Отправить">
	</form>

	<div id="navi">
		<p><a href="#" id="add">Добавить</a> </p>

		<div id="step1" style="display: block;" >
			<img src="img/1div.jpg" id="s1" class="s1" border="1"/>
			<img src="img/2div.jpg" id="s2" class="s2" border="1"/>
			<img src="img/3div.jpg" id="s3" class="s3" border="1"/>
		</div>

	</div>
</div>
</body>
</html>

copydoc 05.02.2014 22:12
Спасибо Вам!
На куче форумов спрашивал - никто помочь не мог, а Вы помогли и так быстро! СПАСИБО!

А можно еще вопрос.
Есть ли в JQuery более рациональный способ добавления html-кода на страницу
я сейчас использую .before() и еще .html()

А есть ли в JQuery что-то типа printr (как в php)?

Чтобы можно было более удобно здоровые куски кода вставлять. Ну и вообще, чтобы не в 1-у строку код вытягивать при вставке, а более читабельно все. Думаю, Вы меня поняли, про что я...:)

рони 05.02.2014 22:32
copydoc,
если необходимо добавить элемент то можно так
jQuery( html, attributes ) 
$("<div/>", {
      "class": "clickme",
      text: "Нажми на меня!",
      click: function(){
          $(this).html('Спасибо.');
      }
}).appendTo("body");

http://api.jquery.com/jQuery/#jQuery-html-attributes

copydoc 05.02.2014 23:24
спасибо! как я понимаю before в данном случае пахать не станет? имеется ввиду не вообще, а именно в предложенной вами конструкции.

т.е работать будет лишь .appendTo("body") и prependTo() ?

просто в моем случае нужно вставлять перед строкой

<input id="subm1" name="submits" type="submit" value="Отправить">

использовать лишние строки в коде не особо хочется, но before уже отпадает, а .appendTo('form'); вставляет код после кнопки...

Вообще для меня это не сильно принципиально. Могу ввести доп. див с классом для позиционирования... Просто интересует, вдруг есть другой вариант...

А вообще еще раз СПАСИБО! Благодаря вашему совету я прям нормально продвинулся по своему коду. Уже много чего другого написал.

рони 05.02.2014 23:59
copydoc,
пока добавить нечего ))) читайте документацию

copydoc 06.02.2014 10:59
Я понял! Спасибо за помощь!


Часовой пояс GMT +3, время: 11:21.