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)将模态的结构再次附加到正文。第二次破裂。该模式会打开，但点击closeModal()后，button.close无效。

的jsfiddle： https://jsfiddle.net/gemrw44k/1/

Answer 1

我不知道从DOM中删除元素的原因，但您可以在close方法中使用委托：

while (i < size && std::any_of(hashArray.begin(), hashArray.end(),
                               [=temp](HashEntry const& e)
                               { return (temp == e.getKey());}) )
{
    i++;
    temp = (hashVal + i*hash_Two(k)) % size;
}

Fiddle

Answer 2

删除$（this）.remove（）;

这行代码会从DOM中删除你的模态。你还需要它。

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

Answer 3

这是你的事件倾听者。从dom中删除模态后，您的事件监听器就完成了。

这很有效，虽然非常难看。

$(function(){

        // 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 onclik
        $('body').find('#modal button.close').on('click', function(e){
            e.preventDefault();

            closeModal();
        });
        }

        // 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();
        });

    });

Answer 4

好的，你要做的是：

您想要删除DOM元素，然后再次追加它。但是您只想处理一次事件处理，以便下次在DOM元素中可以使用相同的元素时，相同的事件处理应该有效。

为此，您需要使用正确的语法和参数来使用jQuery 如： https://jsfiddle.net/gemrw44k/4/

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

    closeModal.call($(this)[0]);
});

注意，我如何在函数中使用第二个参数。这会在body处绑定事件，并仅在第二个参数选择器上发生事件时执行。

另请注意，由于您要删除关闭按钮，您不应该直接调用closeModal（），因为这将是窗口。使用上面提到的呼叫功能。

动态按钮不调用功能

4 个答案: