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

Question

我发现 here 基于 jquery 的弹出脚本有一个奇怪的问题。
问题是：当我尝试获取 '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

看起来事件已删除，请使用事件委托。

$(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>

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

can't retrieve css properties from popup.js elements more than once

css

jquery

popup

jquery-plugins