2

We're using FancyZoom to generate a standard javascript popup effect on the screen.

We want to use JQuery to respond to user clicks to change some colours (using .attr) inside the area that FancyZoom has just popped up for the user.

(In the code sample below I've replaced all the .attr stuff with a simple alert just to illustrate the point. Bar.png is a gold rectangle which should show Hello World when clicked on. Clicking on "Test" shows the fanzy popup.)

If we put bar.png outside the popup like this, it responds as expected when we click on it: 

<script type="text/jscript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>

<script>
    $(document).ready(function() {
        $('#foo').on({ 'click': function() { alert('hello world'); } });
    });
</script>
</head>

<body>
              <a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
              <div id="Test">
              <p> this is some text in the popup</p>
              </div>
              <img id="foo" src="i/bar.png" alt="asdf"/>

                <script type="text/javascript">
                    $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
                </script>

</body>

enter image description here

But if we put it where we want it - inside the FancyZoom popup panel - like so, our alert doesn't fire:

<script type="text/jscript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>

<script>
    $(document).ready(function() {
        $('#foo').on({ 'click': function() { alert('hello world'); } });
    });
</script>
</head>

<body>
              <a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
              <div id="Test">
              <p> this is some text in the popup</p>
              <img id="foo" src="i/bar.png" alt="asdf"/>
              </div>

                <script type="text/javascript">
                    $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
                </script>

</body>

enter image description here

Result: no "hello world" when we click on the gold rectangle.

hawbsl
  • 15,313
  • 25
  • 73
  • 114

2 Answers2

1

I guess that this #foo element is recreated in the pop up so the reference to the event is lost.

try to use "live" version of on() so it catch events for future elements.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

check the link: http://api.jquery.com/live/

Adam Lukaszczyk
  • 4,898
  • 3
  • 22
  • 22
  • thanks it works with: `$(this).on('click', '#foo', function() { alert('hello world'); } );` – hawbsl Apr 27 '12 at 13:29
  • `this` is risky a little bit - it will work only when you are in document scope because `this` points to `document` in that case. So its better when you use `document` there - so it will work always no matter in what scope you put this line of code. – Adam Lukaszczyk Apr 27 '12 at 13:41
1

As previous poster said, the element is recreated so the pointer for the click-function don't listen to the elements inside the fancybox.

However don't use live, it's deprecated. What you wan't is to bind the clickevent to a element that will always exists, say you got a div-container for your fancybox called #container, this is how you should write your code.

$('#container').on('click', '#foo', function() {
    // code goes here.
});

You simply stick in the exact element you want the even to listen for in the .on() function like I did above.

ninja
  • 2,233
  • 1
  • 15
  • 15
  • tried all kinds of variations on divs and nothing worked, but then using `this` it suddenly works: `$(this).on('click', '#foo', function() { alert('hello world'); } );` – hawbsl Apr 27 '12 at 13:29