3

I am trying to create a jQuery Gallery that lets the user flip (with previous, next buttons) through 'icons' which contain photos, movies, PDF documents.

My strategy is as follows:

  • keep jQuery ignorant of the actual contents of the icon,
  • the actual content comes from an Ajax callback, which returns an HTML string,
  • if my php-code so decides, a previous and/or next button maybe present in that HTML string,
  • if those buttons are present, bind a click event to them,
  • the click event makes a recursive call to mainLoop() which shows the new icon.

Here is the code:

function mainLoop() {
if (icons[newIndex] !== IFM_APPENDED ) { // tests whether this icon has already been loaded
    $.ajax({
        type: 'POST',
        url: '/callback/div_supply',
        data: {iconindex: newIndex},
        success: function(data) {
            $('#jquery-lightbox').append(data); // inserts new icon into the DOM
            icons[newIndex] = IFM_APPENDED; // registers that this icon has been loaded
            if ($('#icon'+newIndex+' .prev-button').length !== 0) { // test if the previous button is present
                $('#icon'+newIndex+' .prev-button').click(function () {
                oldIndex = newIndex;
                newIndex -= 1;
                mainLoop();
                }); // END $('#icon'+newIndex+' .prev-button').click()
            } // END if ($('#icon'+newIndex+' .prev-button').length !== 0) 
            if ($('#icon'+newIndex+' .next-button').length !== 0) { // test if the previous button is present
                $('#icon'+newIndex+' .next-button').click(function () {
                oldIndex = newIndex;
                newIndex += 1;
                mainLoop();
                }); // END $('#icon'+newIndex+' .prev-button').click()
            } // END if ($('#icon'+newIndex+' .prev-button').length !== 0) 
        } // END succes:
    }); // END $.ajax
} //  END if (icons[newIndex] !== IFM_APPENDED )
$('#icon'+oldIndex).hide(); // hide the old icon
$('#icon'+newIndex).show(); // hide the new icon
}

$(document).ready(function() {
// Hide some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('embed, object, select').css({ 'visibility' : 'hidden' });
$("#gallery li").click(function() {
    _set_interface();
    mainLoop();
}); // END  $("#gallery a").click(function
}); // END $(document).ready(function()

This code works fine when I step through mainLoop() in the Firebug debugger.

However, when I run it, the script just hangs. It also ends up hanging when I step though the $(document).ready(function(). There a no console.log() calls which could throw Firebug off.

I suspect there is something wrong with the way I have set up recursion.

What is going wrong?

4

1 回答 1

0

好的，我（有点）发现了发生了什么。

问题是由回调 HTML 中明确声明display:none引起的。当我这样做时， .hide() 方法无法将其转换为display: block。

当您认为这在使用 Firebug 时确实有效时，情节会变厚。但是直接在 Firefox 中运行代码时会失败。

我仍然不确定到底是什么击中了我……

编辑

在我联系 Dreamhost 支持后，这个问题就消失了。所以，我认为我这边没有任何问题，但是服务器上的某些设置不正常。但是，我从来没有知道真正的问题是什么。

于 2012-06-22T09:19:14.850 回答