javascript - 动态按钮不调用功能

Question

我正在尝试使用 JavaScript 创建一个简单的模态函数。

html:

<button id="button">open</button>

js:

// define box width
            var boxHeight = 200,
                modal = $('<div id="modal" class="modal-fade"><button class="close">close x</button><div id="foo" /></div><div id="overlay" class="modal-fade" />');

            $('body').append(modal);

            // modal open function
            function openModal(boxHeight){ 
                $('#modal').css({
                    height: boxHeight,
                    marginTop: -(boxHeight / 2)
                });

                $('#modal, #overlay').fadeIn(200);
            }

            // modal close function , removes its elements and append it again
            function closeModal(){
                $('body').find('#modal, #overlay').fadeOut(200, function(){
                    $(this).remove();
                    $('body').append(modal);
                });
            }

            // modal open onclick
            $('#button').on('click', function(e){
                e.preventDefault();

                openModal(boxHeight);
            });

            // modal close onclik
            $('body').find('#modal button.close').on('click', function(e){
                e.preventDefault();

                closeModal();
            });

第一次一切都很顺利。首先，我单击 button#button，它调用 openModal()，它打开模式，然后当我单击 .close 时，调用 closeModal() 它会关闭模态框，将其从 DOM 中删除，然后通过 $('body').append(modal) 将模态框的结构再次附加到正文中。第二次就坏了。当我点击 button.close 时，模式打开，但 closeModal() 不起作用。

JSFiddle: https://jsfiddle.net/gemrw44k/1/

Answer 1

我不知道从 DOM 中删除元素的原因，但你可以在 close 方法中使用委托(delegate):

// modal close onclik
$(document).on('click', '#modal button.close', function(e){
    e.preventDefault();                
    closeModal();
});

Fiddle