0

Items are called from a database which are used to populate a gallery. The modal and masonry scripts work on page load, but when i use the menu script to replace the content of my gallery, scripts stop working.

I struggled with the columns code until discovering clone(true, true)); so i imagine its a similar issue.. but i cant figure this one out. The closest I got was separating the js files and re-linking (yes) them in the php files... :| haha.. this "worked" but created other inconsistencies (increased the increments of the next button by 1 each time a menu item was clicked)

This is my menu code:

        function showHome(){
        $(".deck").empty();
        $.ajax({url: "databaseAll.php", success: function(result){
            $(".deck").html(result);
        }});
        createColumns();
        $("body").animate({scrollTop : $("#header").offset().top}, 1000);
    }
    $(".hm").click(showHome);
    $(".menuLogo").click(showHome);

This is the column code (works on page load and resize)

function createColumns () {

    $(".columns").empty();

    var noColumns = Math.floor($("#gallery").width() / 210);
    if (noColumns<1) {noColumns=1;}

    for (i = 0; i < noColumns; i++) {
        var $column = $("<div>", {"class": "column"});
        $(".columns").append($column);
    }    


    var deckClone = $(".deck").clone(true, true);
    var noCards = $(".deck").children().length;
    var cards = $(".card");
    var cardPosition = 0;

    for (i=0;  i <= noCards; i++) {
        if(cardPosition > noColumns - 1 ){cardPosition = 0;}

        $(".column").eq(cardPosition).append(cards.eq(i));
        cardPosition++;
    }

$(".deck").replaceWith(deckClone.clone(true, true));
cardPosition = 0;

}
createColumns();

function debounce(func, wait, immediate) {...}
$(window).resize(debounce(createColumns,400));

This is to show the modal (works on page load and resize)

function showModal() {
    $("body").css("overflow-y", "hidden");
    $(".small").removeClass("smallHover");
    $("#modal").fadeIn(200);

    var altLong = $(this).attr("alt");
    var altSplit = altLong.split("#");
    $(".picTitle").text(altSplit[0]);                                   
    $(".picStory").text(altSplit[2]);

    var srclong = $(this).attr("src");
    var srcshort = srclong.split("_");
    var srcextension = srclong.split(".");
    $(".big").attr("src", srcshort[0]+'.'+srcextension[1]); 
}
$(".small").click(showModal);

Please help me! Been struggling for weeks on this.. To view the code in action: jarrettonions.co.za

This newb thanks you!!

Jarrett Onions
  • 23
  • 8
  • http://api.jquery.com/live/ or http://api.jquery.com/on/ – Christophe Roussy Apr 17 '18 at 07:48
  • 1
    it should work with jquery event delegation: set the listener on the parent that never changes like [described here](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Kaddath Apr 17 '18 at 07:48
  • 1
    try changing the `$(".small").click(showModal);` to `$('body').on('click', '.small',showModal )` – Sumit Parkash Apr 17 '18 at 08:23
  • Thank you @Kaddath for the info about why it wasnt working, that actually makes a lot of sense that you have to bind the event to an element that doesn't change. – Jarrett Onions Apr 17 '18 at 09:20
  • And thank you @Sumit for the exact syntax! At last! The modal works perfectly now after using the menu! – Jarrett Onions Apr 17 '18 at 09:20

0 Answers0