Question

我发现这个基于jquery的弹出脚本我遇到了这个奇怪的问题here。
问题是：当我试图获得“图像画廊”时。背景并提醒它，它只会工作一次。如果我关闭弹出窗口（通过点击它外面）并再次打开它就无法工作。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: