1

私は.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();
            });
4

2 に答える 2

2

#thankyouOverlay.campaign-form-submitをクリックするまで存在しません。#thankyouOverlayクリック バインディングを他の関数内に移動するか、委任を使用します。

$(document).on('click', '#thankyouOverlay' ...
于 2013-03-29T05:11:44.600 に答える
0

これに似たものを試してください：

        // 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;
        });
于 2013-03-29T05:13:47.357 に答える