Magnific Popup 将不起作用答案

【问题标题】：Magnific Popup will not workMagnific Popup 将不起作用
【发布时间】：2016-11-28 23:37:11
【问题描述】：

我正在尝试让华丽的弹出式 jQuery 库在我的网站上运行。

在下面查看我的 HTML；它似乎正确地包含了样式表和脚本。你会注意到我正在使用：

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

而不是推荐的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

但我已经尝试将前者替换为后者，但仍然无法正常工作。完整的html：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/mystyles.css">
<link rel="stylesheet" href="dimsemenov-Magnific-Popup-2ff1692/dist/magnific-popup.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,600,700|Inconsolata|Indie+Flower|Oswald:400,700|Taviraj:400,600,700" rel="stylesheet">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
<title>Zach Sedefian</title>
</head>
<body>
<div class="top">
    <h1>Personal page</h1>
</div>
<div class="left">
    <nav>
        <a class="nav-link" id="link-1">About</a>
        <a class="nav-link" id="link-2">Web</a>
        <a class="nav-link" id="link-3">Music</a>
        <a class="nav-link" id="link-4" onclick=>Photo</a>
        <a class="nav-link" id="link-5">Contact</a>
    </nav>
</div>
<div class="main">
    <p class="main-p">Welcome. Use the sidebar to navigate.</p>  
</div>

我知道这很奇怪，我正在通过 click() 函数添加相关的 img / div HTML，如下所示：

$('#link-4').click(function(){
$('.main').html("");
$('.main').html('<div class="photo-gallery"><div class="photo-container"><a class="test" href="images/mosque-L.jpg"><img class="test-img" src="images/mosque-Q.jpg"></a></div><div class="photo-container"><a href="images/square-L.jpg"><img src="images/square-Q.jpg"></a></div><div class="photo-container"><a href="images/light-L.jpg"><img src="images/light-Q.jpg"></a></div><div class="photo-container"><a href="images/arch-L.jpg"><img src="images/arch-Q.jpg"></a></div><div class="photo-container"><a href="images/cows-L.jpg"><img src="images/cows-Q.jpg"></a></div><div class="photo-container"><a href="images/land-L.jpg"><img src="images/land-Q.jpg"></a></div><div class="photo-container"><a href="images/cascade-L.jpg"><img src="images/cascade-Q.jpg"></a></div><div class="photo-container"><a href="images/guard-L.jpg"><img src="images/guard-Q.jpg"></a></div><div class="photo-container"><a href="images/green-L.jpg"><img src="images/green-Q.jpg"></a></div><div class="photo-container"><a href="images/edu-L.jpg"><img src="images/edu-Q.jpg"></a></div><div class="photo-container"><a href="images/biz-L.jpg"><img src="images/biz-Q.jpg"></a></div><div class="photo-container"><a href="images/cal-L.jpg"><img src="images/cal-Q.jpg"></a></div></div><p><a href="https://www.flickr.com/photos/148227185@N05/">More on flickr</a></p>');
});

我尝试将它放在实际的 index.html 文件中，但它也没有任何改变。

我正在尝试以各种方式调用 app.js 中的 magnificpopup() 函数。第一个是我想要的方式，底部两个是最简单的调用方式（也不起作用）。

  $('.photo-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image',
  closeOnContentClick: true, 
  gallery:{enabled:true}
});

$('.test').magnificPopup({type:'image'});
$('.test-img').magnificPopup({type:'image'});

没有收到任何调试错误。任何帮助将不胜感激。这是我第一次来到这个网站，却没有在别人的帖子上找到答案。提前致谢。

【问题讨论】：

onclick= in link-4 不正确。它至少需要是onclick=""（当然这不会做任何事情）
如果您通过点击处理程序添加 HTML - magnificPopup 将在相关节点存在之前已经初始化。如果你想继续使用这个方法，那么在同一个点击处理程序中调用magnificPopup，并将它包裹在一个setTimeout中，以确保相关的DOM已经渲染。
花时间澄清你的帖子，因为它目前不是。

标签： jquery magnific-popup

【解决方案1】：

知道了！！您必须输入完整路径。

$('div').magnificPopup({
delegate: 'div div a', // child items selector, by clicking on it popup will open
type: 'image',
closeOnContentClick: true, 
gallery:{enabled:true}
});

【讨论】：

请注意，您似乎正在向页面上的每个 div 添加插件。这会损害您网站的性能。最好找到更好的选择器并调整您的代理路径以适应
我建议$('.photo-gallery').magnificPopup 和delegate: 'div a'

【解决方案2】：

$('.photo-container').magnificPopup({ ... }) 只有在找到与该选择器匹配的类时才会起作用。如果您在运行该行代码后动态添加该类，则$('.photo-container') 将不返回任何元素。

你可以做的是：

$('#link-4').click(function(){
    $('.main').html("");
    $('.main').html('<div class="photo-gallery"><div class="photo-container"><a class="test" href="images/mosque-L.jpg"><img class="test-img" src="images/mosque-Q.jpg"></a></div><div class="photo-container"><a href="images/square-L.jpg"><img src="images/square-Q.jpg"></a></div><div class="photo-container"><a href="images/light-L.jpg"><img src="images/light-Q.jpg"></a></div><div class="photo-container"><a href="images/arch-L.jpg"><img src="images/arch-Q.jpg"></a></div><div class="photo-container"><a href="images/cows-L.jpg"><img src="images/cows-Q.jpg"></a></div><div class="photo-container"><a href="images/land-L.jpg"><img src="images/land-Q.jpg"></a></div><div class="photo-container"><a href="images/cascade-L.jpg"><img src="images/cascade-Q.jpg"></a></div><div class="photo-container"><a href="images/guard-L.jpg"><img src="images/guard-Q.jpg"></a></div><div class="photo-container"><a href="images/green-L.jpg"><img src="images/green-Q.jpg"></a></div><div class="photo-container"><a href="images/edu-L.jpg"><img src="images/edu-Q.jpg"></a></div><div class="photo-container"><a href="images/biz-L.jpg"><img src="images/biz-Q.jpg"></a></div><div class="photo-container"><a href="images/cal-L.jpg"><img src="images/cal-Q.jpg"></a></div></div><p><a href="https://www.flickr.com/photos/148227185@N05/">More on flickr</a></p>');

    $('.photo-container').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image',
        closeOnContentClick: true, 
        gallery:{enabled:true}
    });
});

【讨论】：