Dynamiska checkbox, trigger

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!

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);

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?

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

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?

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).