Po ajaxe nefunguje js na daný element

iNviNho

Mám stránku http://ekotrim.sk/…goria/ups-69

Button viac info funguje ajaxovo a funguje presne tak ako má, avšak po kliknutí mi nefunguje jquery štylovanie.

Button:

<?php
<a n:href="snipetujVyzvu! $prod->id_prod" style="blabla" class="ajax zelenygradient morei">Viac info</a>
?>

Ajax sa normalne spustí všetko funguje, ale nefunguje potom jquery kod:

<?php
$(document).on("click",".morei",function() {
    var prodbox = $(this).closest(".produktbox");
    var maclass = prodbox.hasClass("neoutuj");
    $(".morei").parent().next().hide().closest(".produktbox").removeClass("neoutuj").css({
        "-webkit-box-shadow" : "1px 1px 5px 5px #e2e1e1",
        "-moz-box-shadow": "1px 1px 5px 5px #e2e1e1",
        "box-shadow": "1px 1px 5px 5px #e2e1e1"
    });


    if (!maclass) {
        $(this).parent().next().fadeIn(500);
        prodbox.addClass("neoutuj");
        prodbox.css({
            "-webkit-box-shadow" : "1px 1px 5px 5px #83c03f",
            "-moz-box-shadow": "1px 1px 5px 5px #83c03f",
            "box-shadow": "1px 1px 5px 5px #83c03f"

        });
    } else {
        $(this).parent().next().fadeOut(250);
        prodbox.removeClass("neoutuj");
    }
    });
?>

Akonáhle zruším z toho buttonu class ajax, tak to funguje …

Skúšal som:

<?php
$.nette.ext({
    load: function () {
        $(document).on("click",".morei",function() {
    var prodbox = $(this).closest(".produktbox");
    var maclass = prodbox.hasClass("neoutuj");
    $(".morei").parent().next().hide().closest(".produktbox").removeClass("neoutuj").css({
        "-webkit-box-shadow" : "1px 1px 5px 5px #e2e1e1",
        "-moz-box-shadow": "1px 1px 5px 5px #e2e1e1",
        "box-shadow": "1px 1px 5px 5px #e2e1e1"
    });


    if (!maclass) {
        $(this).parent().next().fadeIn(500);
        prodbox.addClass("neoutuj");
        prodbox.css({
            "-webkit-box-shadow" : "1px 1px 5px 5px #83c03f",
            "-moz-box-shadow": "1px 1px 5px 5px #83c03f",
            "box-shadow": "1px 1px 5px 5px #83c03f"

        });
    } else {
        $(this).parent().next().fadeOut(250);
        prodbox.removeClass("neoutuj");
    }
    });
    }
});
?>

Akonáhle vyskúšam .bind() namiesto .on() tak to funguje, ale keď použijem vyhľadávanie a prekreslí sa snippet s produktami, tak .bind() už logicky nefunguje, pretože su to nanovo vykreslené elementy …

Ďakujem za rady a pomoc.

Ale logicky to nemôže fungovať, pretože po tom loade to čaká na click…

iNviNho

EDIT: omylom som to zmazal, neviem prečo mi to tu zobrazuje na dva krát ten príspevok …

Skúšal som

<?php
$.nette.ext('morei', {
    load: function (rh) {
        $('.produktbox').on("click",".morei",function() {
    var prodbox = $(this).closest(".produktbox");
    console.log("pes");
    });
    }
});

nefunguje
?>

iNviNho

Prišiel som k funkčnému riešeniu

<?php
$.nette.ext('morei', {
	before: function (xhr, settings) {
	    var that = $(settings.nette.el);
		    var prodbox = $(that).closest(".produktbox");
		    var maclass = prodbox.hasClass("neoutuj");
		    $(".morei").parent().next().hide().closest(".produktbox").removeClass("neoutuj").css({
			"-webkit-box-shadow" : "1px 1px 5px 5px #e2e1e1",
			    "-moz-box-shadow": "1px 1px 5px 5px #e2e1e1",
			    "box-shadow": "1px 1px 5px 5px #e2e1e1"
		    });


		    if (!maclass) {
			$(that).parent().next().fadeIn(500);
			prodbox.addClass("neoutuj");
			prodbox.css({
			"-webkit-box-shadow" : "1px 1px 5px 5px #83c03f",
			"-moz-box-shadow": "1px 1px 5px 5px #83c03f",
			"box-shadow": "1px 1px 5px 5px #83c03f"

			});
		    } else {
			$(that).parent().next().fadeOut(250);
			prodbox.removeClass("neoutuj");
		    }
	}
});
?>

ak by niekto mal podobný problém …

iNviNho napsal(a):

EDIT: omylom som to zmazal, neviem prečo mi to tu zobrazuje na dva krát ten príspevok …

Skúšal som
<?php
$.nette.ext('morei', {
    load: function (rh) {
        $('.produktbox').on("click",".morei",function() {
    var prodbox = $(this).closest(".produktbox");
    console.log("pes");
    });
    }
});

nefunguje
?>