webForumDet fria alternativet

Dynamiska checkbox, trigger

JavaScript

5 svar · 1 186 visningar · startad av MickeA.com

Medlem sedan feb. 20034 441 inlägg
Frågan#1

Hej!

Har problem med en trigger som ska "köras" efter att ett ajaxanrop har fyllt i div med checkboxar. Hur jag än försöker så triggas aldrig mitt event.

function Foobar(){
	$.ajax({
		url: ABSPATH + ADMPATH + "Page.php?Load",
		type: "POST",
		data: {
			CompId: CompId
		},
		dataType: "html",
		error: function(response){
			
		},
		success: function(data){
			$('#MyDiv').html(data);
		}
		complete: function(){
			$('#MyDiv input:checkbox:checked').trigger('chktrig');
		}
	});
}

Det här har jag längst ner på samma sida:

$(function(){
	$('input:checkbox').on('change chktrig', function(e) {						
	  var li = $(this).closest('li');
	  
	  $(this).parent().toggleClass('IsAllowed', this.checked);
	  children(li, this.checked);
	  parent(li);
	});
	var children = function($li, isChecked) {
		if(isChecked){
			$li.find("ul").show();
		}else{
			$li.find("ul").hide();
		}
		$li.find("ul input:checkbox").prop('checked', isChecked);
		$li.find("ul label").toggleClass('IsAllowed', isChecked)

	};

	var parent = function($li) {
	  var li = $li.parents("li");
	  
	  li.each(function() {
		var li = $(this);
		var checkbox = li.find(">ul input:checkbox:checked");
		li.find(">label>input").prop('checked', checkbox.length > 0);
		li.find(">label").toggleClass('IsAllowed', checkbox.length > 0);
	  });
	  
	};
});

Men inget händer... Precis som att triggen inte finns. Om jag lägger till det här istället i complete i min ajaxfunktion:

alert($('#MyDiv input:checkbox:checked').length);

Så visas antalet iklickade boxar, men triggern får jag inte att fungera. Ända sättet att få den att funka, är att lägga hela $('input:checkbox').on() i complete-delen, men då tappar jag lite syftet eftersom jag behöver använda samma kod på flera ställen.

Vad gör jag fel?

Tack!

Medlem sedan juni 20019 519 inlägg
#2

Du ersätter hela din #MyDiv så alla event du har haft bunda på dina gamla element finns inte på de nya.

Du skulle kunna köra en delegate bindning på eventen:

$(document),on('change chktrig', 'input:checkbox', fn);
Medlem sedan feb. 20034 441 inlägg
#3

Okej, intressant. Provade följande:

<div id="theParent">
	<div id="theChild">

	</div>
</div>

Laddar in mina checkboxar inuti theChild och sen kör trigger enl. $("#theParent input:checkbox:checked").trigger('chktrig');. Det fungerar inte.

Om jag istället gör enligt ditt förslag, men $(document).on('','' function(){ }); så fungerar det bra.

Hur kommer det sig? Bör inte events som tillhör "theParent" finnas kvar även om innehållet i "theChild" förändras?

Medlem sedan juni 20019 519 inlägg
#4

Du letar upp alla alla checkboxar som finns i contextet när js koden läser in sig.
Det är bara en selector

Medlem sedan feb. 20034 441 inlägg
#5

Du menar att när sidan laddar så hittar den såklart inget, eftersom diven är tom? Sen spelar det ingen roll om den fylls dynamiskt, den tolkas fortf. som tom?

Medlem sedan juni 20019 519 inlägg
#6

ungefär... du kör bara bindingen en gång, så den har "gjort sitt jobb" när den har körts

om du hade haft en checkbox vid sidladdning och sen skriver du över #MyDiv så har du ett nytt Context inne i #MyDiv utan några event på sig (checkboxarna).

251 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
116 ms — deklarationer (db)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)
115 ms — ändringar (db)