Question

I’m having an issue with the popup window showing the last element the user clicked on instead of the current element. I have several different coupons that the user can click on to print. If for example, the user clicks on the coupon with an id of “test”, nothing happens but when the user clicks a second time, the coupon appears. In this case, the “test coupon” continues to appear no matter which coupon is clicked. If the page is manually refreshed, then the user can click on a new coupon. What am I doing wrong?

$(".coupon").click(function() {
    var id = $(this).attr("id");
    $('.pop').popupWindow({
        windowURL:'coupons/' + id + '.html'
    });
});

---

.coupon {
margin:10px;
height:152px;
width:193px;
position:relative;
cursor:pointer;
float:left;
}

.coupon .price {
margin-top:7px;
font-size:29px;
font-weight:bold;
color:white;
text-align:center;
}

.coupon .title {
margin-top:5px;
font-size:18px;
font-weight:bold;
color:black;
text-align:center;
font-family:'Times New Roman',Georgia,Serif;
}

<div class="coupon pop" id="test1">
  <div class="price">
    $5.00 OFF
  </div>
  <div class="title">
    Test
  </div>
</div>

<div class="coupon pop" id="test2">
  <div class="price">
    $5.00 OFF
  </div>
  <div class="title">
    Another test
  </div>
</div>

Answer 1

I try this code and works

javascript:

<script type="text/javascript">
$(function() {
$('.coupon').each(function(){
    $(this).popupWindow({ 
        windowURL:$(this).attr("href")
    });
});
});
</script>

html code:

<a class="coupon" href="http://google.com" onclick="return false;" id="google">Google</a>
<a class="coupon" href="http://yahoo.com" onclick="return false;" id="yahoo">Yahoo</a>

Hope that the changes in attribute not broke your project

Chears

Update:
I convert your div tag into a

<a class="coupon" id="test1" href="_your_link_">
  <span class="price">$5.00 OFF</span>
  <span class="title">Test  </span>
</a>