jquery - onClick .hide() 单击的相同 DIV

Question

我正在.append()通过 jQuery 编写一些 HTML - 它应该发挥作用。但是，.detach()(function below // close thankyou message) 的函数不会删除附加的 HTML。没有控制台错误......并且似乎无法注意到/弄清楚我做错了什么。

如何分离单击时附加的“感谢消息”？当我点击它时，什么也没有发生。

            // Thank You Confirmation
            // Example Modal
            var tyOverlay = 'thankyouOverlay';
            var thxMsg = 'thanksBox';

            $('.campaign-form-submit').on('click', function () {
                $('#campaign-wrap').append(                    
                    '<div id="' + tyOverlay + '">' +          
                        '<div class="' + thxMsg + ' shadow">' +
                            '<div class="ty-msg left">THANK YOU! YOUR ENTRY HAS BEEN RECEIVED.</div>' +
                            '<div class="ty-close left">' +
                                '<div class="ty-close-icon"></div>' +
                            '</div>' +    
                        '</div>' +
                    '</div>'
                    );
                $('#' + tyOverlay + ', .' + thxMsg + '').hide();
                $('#' + tyOverlay + '').fadeIn(400, function () {
                    $('.' + thxMsg + '').slideDown(200);
                });
                return false;
            });
            // close thankyou message
            $('#thankyouOverlay').on('click', function (e) {
                e.preventDefault();
                $(this).detach();
            });

Answer 1

#thankyouOverlay.campaign-form-submit在被点击之前不存在。#thankyouOverlay将点击绑定移动到其他函数内或使用委托：

$(document).on('click', '#thankyouOverlay' ...

Answer 2

尝试类似的事情：

        // Thank You Confirmation
        // Example Modal
        var tyOverlay = 'thankyouOverlay';
        var thxMsg = 'thanksBox';

        $('.campaign-form-submit').on('click', function () {
            $('#campaign-wrap').append(                    
                '<div id="' + tyOverlay + '">' +          
                    '<div class="' + thxMsg + ' shadow">' +
                        '<div class="ty-msg left">THANK YOU! YOUR ENTRY HAS BEEN RECEIVED.</div>' +
                        '<div class="ty-close left">' +
                            '<div class="ty-close-icon"></div>' +
                        '</div>' +    
                    '</div>' +
                '</div>' + 
                "<script>// close thankyou message \
                    $('#thankyouOverlay').on('click', function (e) { \
                    e.preventDefault();\ 
                    $(this).detach();\
                });</script>"
                );
            $('#' + tyOverlay + ', .' + thxMsg + '').hide();
            $('#' + tyOverlay + '').fadeIn(400, function () {
                $('.' + thxMsg + '').slideDown(200);
            });
            return false;
        });