Forum PHP.pl > [jQuery] wykrywanie zmiany w dynamicznie dodanym polu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] wykrywanie zmiany w dynamicznie dodanym polu

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

szczeku

21.10.2010, 15:10:59

Witam,
chciałbym zrobić aby po wybraniu odpowiedniej wartosci w polu select, pokazywał się odpowiedni formularz (z tym nie ma problemu), a następnie w tym załadowanym formularzu jest pole typu input gdzie chce wpisać ilość pól które chce aby sie pojawiły, albo za pomaca przycisków dodaj-usuń dodawanie tych pol. Wiem jak zrobić wszystko z osobna jednak nie umiem poradzić sobie z reakcją na zmiane w tym dynamicznie dodanym polu input.

[HTML] pobierz, plaintext 
$(document).ready(function() {
	$("#fieldtype").change(function () {
		var str = "";
		$("#fieldtype option:selected").each(function () {
			if ($(this).val() == 1) {
				str += 'Ilość odpowiedzi : <input type="text" name="ilosc_odpowiedzi" id="ilosc_odpowiedzi"><p id="odpowiedzi"></p>';
				}
			else if ($(this).val() == 2) {
				str += "<input name="+$(this).text() + "values= "+$(this).text;
				}
			});
		$("#field").html(str);
		}).change();
		$("#ilosc_odpowiedzi").keyup(function() {
		var odp = "";
		if($(this).val() == 1) {
			odp += 'Odpowiedź 1 : <input type="text" name="odp1">';
			}
		$("#odpowiedzi").html(odp);
		});
	});
[HTML] pobierz, plaintext

wpisanie w polu ilosc_odpowiedzi nic nie robi, prosze o pomoc.
Pozdrawiam

pgrzelka

22.10.2010, 07:20:51

do nowo dodanych inputów musisz przypisać akcje po ich utworzeniu
czyli najpierw dodajesz javascriptem inputa, następnie przypisujesz mu akcje, a teraz robisz odwrotnie, przypisujesz akcje do nie istniejącego inputa

erix

22.10.2010, 07:28:59

albo live().

szczeku

24.10.2010, 14:38:53

Dobra problem rozwiązany. Umieszczam rozwiązanie może komuś sie przyda.

[HTML] pobierz, plaintext 
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script>
	$(document).ready(function() {
		$("#fieldtype").change(function () {
			var text = "";
			var input = "";
			var odp = "";
			$("#fieldtype option:selected").each(function () {
				if ($(this).val() == 1) {
					text += 'Ilość pól : ';
					input = $('<input type="text" name="ilosc_pol" id="ilosc_pol">');
					input.keyup(function() {
						for(var i=1;i<=$(this).val();i++) {
							odp += 'pole '+i+' : <input type="text" name="odp'+i+'"><br>';
							$("#odp").html(odp);
							}
						})
					}
				else if ($(this).val() == 2) {
					//instrukcje dla opcji 2 z lsty rozwijanej
					$("#odp").html(odp);
					}
				});
			$("#field").html(text).append(input);
			$("#odp").html(odp);
			}).change();
		});
</script>
</head>
<body>
  <select id="fieldtype">
    <option value="">wybierz</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <p id="field"></p>
  <p id="odp"></p>
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.