Niedziałający kod dla nowo dodanych elementów

0

Cześć!
proszę o wyrozumiałość to moja druga aplikacja napisana w życiu, uczę się wszystkiego sama. Mam świadomość, że jestem przysłowiowym 'Januszem'. Mój problem polega na niedziałającym kodzie dla nowo dodanych elementów, kod działa jeśli element już istnieje na stronie HTML, a nie został dodany poprzez dodanie go JavaScriptem do HTML. Mam nadzieję, że jasno tłumaczę, przyczyna może też być inna, jednak jeśli usuniemy komentarz w HTML okalający element wtedy kod działa.
Tutaj zamieszczam link do codepen: http://codepen.io/annadrybulska/pen/LxVNYJ
Poniżej kod:

$('.input').focus(function(){
		$(this).parent().addClass('focused');
		if($('.input').change()){
		$('#plus-btn').addClass('plus-btn-focused');
		}
		
			})
	$('.input').blur(function(){
		$parent = $(this).parent();
		$parent.removeClass('focused');

	})
	$(':input[name="hours"]').keypress(function() {
    if (this.value.length >= 2) {
        return false;
    }
});
	$('input[name="minutes"]').keypress(function() {
    if (this.value.length >= 2) {
        return false;
    }
});
	$('input[name="seconds"]').keypress(function() {
    if (this.value.length >= 2) {
        return false;
    }
});
	$('input[name="minutes"]').keyup(function() {
	

    	if (!this.value.match(/[0-5][0-9]/)) {
        this.value = this.value.replace(/[^0-5][0-9]/g, '');
        if (this.value.match(/^\s*$/[0-9] )) {
        	this.value = this.value.replace(/[0][0-9]/);
        }
    }

     
});
	$('input[name="hours"]').keyup(function() {
	

    	if (!this.value.match(/[0-5][0-9]/)) {
        this.value = this.value.replace(/[^0-5][0-9]/g, '');
        if (this.value.match(/^\s*$/[0-9] )) {
        	this.value = this.value.replace(/[0][0-9]/);
        }
    }

     
});

	$('input[name="seconds"]').keyup(function() {
	

    	if (!this.value.match(/[0-5][0-9]/)) {
        this.value = this.value.replace(/[^0-5][0-9]/g, '');
        if (this.value.match(/^\s*$/[0-9] )) {
        	this.value = this.value.replace(/[0][0-9]/);
        }
    }

     
});

Wydaje mi się, że mój kod w JavaScript mógłby być uproszczony poprzez pętle, funkcje.. nie wiem jak za to się zabrać. Dodatkowo cały czas się rozrasta co przyprawia mnie o dreszcze....
Jeszcze raz proszę o wyrozumiałość, nie jestem w tym biegła, nie posiadam wykształcenia, ani nie zrealizowałam żadnego kursu...
Jest to moje hobby, dość wymagające z powodu braku mojej wiedzy ale nie chcę się poddać!
Chętnie zastosuje się do Waszych rad i sugestii i opanuję zaproponowany przez Was materiał. Dziękuję!

1

Nie chce mi sie rozszyfrowywać Twojego kodu (tym bardziej, że wklejenie coś Ci nie wyszło), niemniej jednak domyślam sie o co chodzi - jeśli dodajesz listener bezpośrednio do elementów pobranych za pomocą JSa, to tylko elementy obecne w tamtej chwili będą obsłużone. Nowym elementom trzeba nadać listenery od nowa. Lub nie trzeba, jest na to prostszy sposób - poczytaj o czymś takim jak event bubbling - w Twoim przypadku wystarczy założyć listenera na kontener okalający elementy o które Ci chodzi.

0

Dziękuję serdecznie, zrobię sobie chwilę przerwy i poczytam o event bubbling :)

1

Ok, poprawiłaś post to masz kilka porad na szybko:

  • zauważ, że ciągle powtarzasz kod:
$(selector).keypress(function() {
  if (this.value.length >= 2) {
    return false;
  }
});

i:

$('input[name="hours"]').keyup(function() {
  if (!this.value.match(/[0-5][0-9]/)) {
    this.value = this.value.replace(/[^0-5][0-9]/g, '');
    if (this.value.match(/^\s*$/[0-9] )) {
      this.value = this.value.replace(/[0][0-9]/);
    }
  }
});

Możesz z callbacka zrobić nazwaną funkcję i reużywać:

function keypressCallback() {
  if (this.value.length >= 2) {
    return false;
  }
}

$(':input[name="minutes"]').keypress(keypressCallback);
$(':input[name="hours"]').keypress(keypressCallback);
$(':input[name="seconds"]').keypress(keypressCallback);

podobnie dla drugirgo przypadku.

Możesz także całe wyrażenie wrzucić do funkcji, bo zmienny jest tylko selektor, więc wrzuć go jako argument wywołania:

function addKeypressListener(selector) {
  $(selector).keypress(function() {
    if (this.value.length >= 2) {
      return false;
    }
  });
}

addKeypressListener(':input[name="hours"]');
addKeypressListener(':input[name="minutes"]');
addKeypressListener(':input[name="seconds"]');

Sam warunek też jest dziwny - zamiast zwrócić true / false zwracasz false / undefined (oba są falsy):

// zamiast:
if (this.value.length >= 2) {
  return false;
}

// pwnie lepiej po prostu:
return this.value.length >= 2;

Nie pobieraj dwa razy tego samego selektora, metody możesz chainować, np:

$(':input[name="hours"]')
  .keypress(function () {
    return this.value.length >= 2;
  })
  .keyup(function () {
    if (!this.value.match(/[0-5][0-9]/)) {
      this.value = this.value.replace(/[^0-5][0-9]/g, '');
      if (this.value.match(/^\s*$/[0 - 9])) {
        this.value = this.value.replace(/[0][0-9]/);
      }
    }
  })
;

Łącząc wszystkow całość:

addKeyListeners('input[name="hours"]');
addKeyListeners('input[name="minutes"]');
addKeyListeners('input[name="seconds"]');

function addKeyListeners(selector) {
  $(selector)
    .keypress(keypressCallback)
    .keyup(keyupCallback)
  ;
}

function keypressCallback() {
  return this.value.length >= 2;
}

function keyupCallback() {
  if (!this.value.match(/[0-5][0-9]/)) {
    this.value = this.value.replace(/[^0-5][0-9]/g, '');
    if (this.value.match(/^\s*$/[0 - 9])) {
      this.value = this.value.replace(/[0][0-9]/);
    }
  }
}

albo nawet tak możesz zrobić wywołanie funkcji:

[
  'input[name="hours"]',
  'input[name="minutes"]',
  'input[name="seconds"]',
].forEach(addKeyListeners);

Jeszcze zawartość keyupCallback jest niepokojąca, nazwy też dałem na szybko, nie są najlepsze - no i pominąłem event bubling, to zadanie dla ciebie.

Poza tym:

0

Macieju, bardzo dziękuję za pomoc! Przeczytałam o event bubbling i capturing, rzuciłam okiem na eventListeners i chyba jestem za cienka na tę chwilę.... Z przyjemnością zanurzę się w książkach które mi podrzuciłeś, może wtedy więcej rzeczy mi się rozjaśni. Chyba za szybko rzucam się na głęboką wodę..
Ogromne podziękowania ślę dla tego kto poprawił mój post :*

1 użytkowników online, w tym zalogowanych: 0, gości: 1