Question

我是.append()通过jQuery的一些HTML - 它应该起作用。但是，.detach()（// 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;
        });

onClick .hide（）点击相同的DIV

2 个答案: