关闭按钮没有（在点击事件jQuery上）弹出

我有一个问题，似乎很简单，但我无法找到发生了什么事情。我弹出一个onClick的弹出菜单，弹出框内显示。我在我的页面上有一个名为popup的元素，并且它的增长可以通过添加popupActive类和使用load()来填充点击屏幕，然后从服务器加载一些内容。迄今为止，这一切都很好。然后，用户点击X它应该删除popupActive类并缩回到原始状态（这通过scale(0)和scale(1)完成）。但是，当我点击X什么都没有发生时，控制台不显示任何错误，并且我尝试console.log("Hello!")以查看它是否曾经在那里（脚本），但它不显示任何内容。关闭按钮没有（在点击事件jQuery上）弹出

我的代码如下。

HTML

<section id="popup" class="popup"><button class="about-close">X</button</section>

CSS

.popup { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100vw; 
    min-height: 100vh; 
    border-radius: 50px; 
    z-index: 0; 
    transform: scale(0); 
    transition: 1s linear all; 
} 
.popupActive { 
    transform: scale(1); 
    z-index: 99; 
    transition: 1s linear all; 
} 
.about-close { 
    position: fixed; 
    top: 30px; 
    right: 30px; 
    width: 50px; 
    height: 50px; 
    background: transparent; 
    display: block; 
    border-radius: 50%; 
    border: 1px solid #f74d4e; 
    color: #f74d4e; 
    font-size: 30px; 
    cursor: pointer; 
    z-index: 999; 
}

的JavaScript

$(".li-a").on('click',function(event) { 
    event.preventDefault(); 
    $("#popup").addClass("popupActive").load("Ajax/about.html"); 
}); 
$(".about-close").on('click',function(event) { 
    event.preventDefault(); 
    console.log("Hello!"); 
    $(".about-container").remove(); 
    $("#popup").removeClass("popupActive"); 
});

来源

2017-10-07 stelarossa

请提供HTML以及 –

它的工作。我已经测试过了： - https://jsfiddle.net/0kh6c9sm/ –

而不是将内容加载到弹出元素中，将内容div放入弹出窗口并尝试加载到该元素。 –

<section id="popup" class="popup"><button class="about-close">X</button> 
    <div class="popup-content"></div> 
    </section>

脚本：

$(".li-a").on('click',function(event) { 
     event.preventDefault(); 

     $("#popup").addClass("popupActive"); 
     $("#popup .popup-content").load("Ajax/about.html"); 
    }); 
    $(".about-close").on('click',function(event) { 
     event.preventDefault(); 
     console.log("Hello!"); 
     $("#popup .popup-content").remove(); 
     $("#popup").removeClass("popupActive"); 
    });

来源

2017-10-07 11:10:24

注意，这将附加一个新的处理程序，每次打开模式。尝试多次打开关闭，并观察您在控制台中获得了多少“Hello”。如果你不期待多次打开/关闭，这可能不是什么大不了的事情。 – arbuthnott

它的简单页面，只是为了好玩，没有多少访问或打开/关闭，静态，简单的内容... – stelarossa

@arbuthnott，我不明白。收盘价仅在全球范围内收盘一次。它没有被绑定在.li-a –

你load方法是异步的 - 这意味着在尝试附加关闭模式的点击处理程序之前，可能无法添加内部html。

你可以附上点击处理程序回调的负载（如.load("Ajax/about.html", function() { /* attach it here */ })），但我认为一个更好的解决办法是装上监听上涨，只是有一次甚至模态加载之前：

$("#popup").on('click', '.about-close',function(event) { 
    event.preventDefault(); 
    console.log("Hello!"); 
    $(".about-container").remove(); 
    $("#popup").removeClass("popupActive"); 
});

当初始页面DOM准备就绪时，该代码只需要运行一次。

来源

2017-10-07 11:03:11 arbuthnott

这一个不工作，只是尝试它，是最好的何塞Tuttu解决方案正在working.Thanks无论如何:) – stelarossa

关闭按钮没有（在点击事件jQuery上）弹出

回答

相关问题