无法动态创建模态以单击时关闭| 以.parents（）打开

Question

I have a module that was built using a Handlebars.js template, I orignally had it opening and closing perfectly, but the information wasn't updated, this can be seen here .

Now I have it so it updates the info, but the toggleClass won't fire when clicking either the 'x' or .overlay. This can be seen here .

Here is my jQuery functions to activate the modal.

 $(document).on('click', "a.btn", function (e) {
           $(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
        });

        $(document).on('click', '.overlay', function (e) {
            $(e.target).prev('.modal').toggleClass('modal--show');
        });

        $(document).on('click', '.modal__close', function () {
            $('.modal').toggleClass('modal--show');
        });

How can I make it so this modal will both Open and Close, as well as display the correct information?

Some things I've tried...

• replacing: $(e.target) with $(this)

Answer 1

The problem with your code is that you are trying to toggle class of all .modal divs. But you need to toggle the class of only .modal.modal--show . Also in case of overlay, you need to find the parent div not the sibling div. So use .closest() in place of .prev()

So if you modify your code as

        $(document).on('click', '.overlay', function (e) {
            $(e.target).closest('.modal.modal--show').toggleClass('modal--show');
        });

        $(document).on('click', '.modal__close', function () {
            $('.modal.modal--show').toggleClass('modal--show');
        });