jquery - 无法多次从 popup.js 元素检索 css 属性

Question

我发现这个基于 jquery 的弹出脚本有这个奇怪的问题 here .
问题是:当我尝试获取“imageGallery”背景并提醒它时，它只会工作一次。如果我关闭弹出窗口(通过在其外部单击)并再次打开它，它将不起作用。

你知道如何解决这个问题吗？我希望它在每次打开弹出窗口时都能正常工作，而不仅仅是在第一次打开时。

$('a.popup').popup();

$(".imageGallery").on('click', function() {
    var bg = $(this).css('background-image');
    alert(bg);
});

.imageGallery { width: 200px; height: 250px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="http://docs.toddish.co.uk/css/plugins/popup.css" media="all" type="text/css" rel="stylesheet">
<script src="http://docs.toddish.co.uk/js/plugins/jquery.popup.min.js"></script>

<div class="imageChoice" style="background-size: 200 250; height: 200; width: 250;"><a href=#gallery class="popup">Open gallery</a>
</div>

<div id="gallery" style="display:none">
  <div class="imageGallery" style="background-image:url('http://tctechcrunch2011.files.wordpress.com/2014/06/apple_topic.png?w=600'); background-size: 200 250; height: 200; width: 250;"></div>

  <div class="imageGallery" style="background-image:url('http://images.clipartpanda.com/educational-clipart-M9TpyejiE.gif');background-size: 200 250; height: 200; width: 250;"></div>

  <div class="imageGallery" style="background-image:url('http://images.clipartpanda.com/teacher-apple-border-clipart-KTjgkqLTq.jpeg'); background-size: 200 250; height: 200; width: 250;"></div>
</div>

Answer 1

看起来事件被删除了，使用事件委托(delegate)。

$(document).on('click', ".imageGallery", function() {

---

$('a.popup').popup();

$(document).on('click', ".imageGallery", function() {
    var bg = $(this).css('background-image');
    alert(bg);
});

.imageGallery { width: 200px; height: 250px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="http://docs.toddish.co.uk/css/plugins/popup.css" media="all" type="text/css" rel="stylesheet">
<script src="http://docs.toddish.co.uk/js/plugins/jquery.popup.min.js"></script>

<div class="imageChoice" style="background-size: 200 250; height: 200; width: 250;"><a href=#gallery class="popup">Open gallery</a>
</div>

<div id="gallery" style="display:none">
  <div class="imageGallery" style="background-image:url('http://tctechcrunch2011.files.wordpress.com/2014/06/apple_topic.png?w=600'); background-size: 200 250; height: 200; width: 250;"></div>

  <div class="imageGallery" style="background-image:url('http://images.clipartpanda.com/educational-clipart-M9TpyejiE.gif');background-size: 200 250; height: 200; width: 250;"></div>

  <div class="imageGallery" style="background-image:url('http://images.clipartpanda.com/teacher-apple-border-clipart-KTjgkqLTq.jpeg'); background-size: 200 250; height: 200; width: 250;"></div>
</div>