jQuery: Custom event doesn't run

Question

I've currently come to a jQuery problem which cost me multiple hours so far and I still can't figure out what's going wrong exactly. Long story short - my code is part of a memory game written in Play Framework.

jQuery file (simplified):

$(document).ready(function () {
    $(".card-grid").on("myEvent", '.card', function (event) {
        $(".card-grid").flip({
            trigger: 'click'
        });
    });
    $("#triggerButton").click(function () {
        $(".card-grid").trigger("myEvent");
    });
});

Explanation: The memory "cards" are loaded onto the page after initial loading using other (working) jQuery code. One .card div is loaded each into one .card-grid div. I need to run the flip method for the jQuery-flip plugin to work. jQuery version is 2.1.4 (flip won't run on more recent versions).

If I replace myEvent in the first method with, for example, click, I can just click one of the cards and the function runs just fine.

If I create another function, lets say

$(".test").on("myEvent", function (events) {
    $(this).text("Testtext").show();
});

and change the target of my button, the text shows just fine inside a .test object.

I'd really appreciate if anybody could tell me what's wrong.

Answer 1

Your approach is correct, however, $(".card-grid").on("myEvent", '.card', funct... targets all divs called .card that are child elements of .card-grid.

Hence, $(".card-grid .card").trigger("myEvent"); makes for a better target for your $("#triggerButton").click... function.