jQuery、Shadowbox 和 AJAX

Question

我想使用 AJAX 和 Shadowbox 加载一些内容

基本上我希望用户转到一个页面以防 javascript 关闭。所以这就是我想做的：-

1) 取消点击事件，即用户不得转到其他页面。

2) 在jQuery中使用ajax函数加载内容

3) 在阴影框中显示内容

我的代码工作正常，直到使用 ajax 加载内容，但不显示影子框，我猜 URL 正在刷新，一切都变为空白。

jQuery(document).ready(function($){
    // rounded corners
    $('img').addClass('corner iradius16');
    DD_roundies.addRule('#nav li a',4,true);
    DD_roundies.addRule('.grid',6,true);


    $('h2 a').bind('click', function() {
        var id = $(this).attr('id');
        $.ajax({ 
            url: "/ajax-post.php?p="+id, 
            success: function(data){
                Shadowbox.open({
                    content:    data,
                    player:     "html",
                    height:     350,
                    width:      350
                });
            }
         });
        return false;
    });

---

更新 1

尝试了这段代码，一旦加载了shadowbox，文档就会重新加载并变白。

Shadowbox.init({
    skipSetup: true,
    players: ["html"]
});


  // LOAD
jQuery(document).ready(function($){
    // rounded corners
    $('img').addClass('corner iradius16');
    DD_roundies.addRule('#nav li a',4,true);
    DD_roundies.addRule('.grid',6,true);


    $('.post h2 a').bind('click', function() {
        var id = $(this).attr('id');
        $.ajax({ 
            url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id, 
            success: function(data){
                show_box(data);
            }
         });
        return false;
    });

});

//阴影框 功能显示框（html）{ 影盒.open({ 内容：html， 播放器：“html”， 身高：350， 宽度：350 }); }

---

更新 2

好的，问题得到了解决，我通过 ajax 获取的 html 中有一些 javascript，这就是页面重新加载的原因。

为什么会这样？有什么想法吗？

Answer 1

由于您没有收到任何 JavaScript 错误，请尝试通过分解来进行调试：

确保 click 事件的绑定和覆盖正常运行：

$('h2 a').bind('click', function() {
    alert('click even fired');
    return false;
});

如果可行，请检查您的 ajax 请求返回的数据：

$('h2 a').bind('click', function() {
    var id = $(this).attr('id');
    $.ajax({ 
        url: "ajax-post.php?p="+id, 
        success: function(data){
           alert(data);
        }
     });
    return false;
});

代码看起来应该可以工作，所以我猜要么是其他地方出了问题（在这种情况下，第一次测试可能会失败），要么你得到了一些非常奇怪的数据。

Answer 2

需要运行

Shadowbox.setup('h2 a');

这将重新初始化并将其绑定到任何 ajax 加载的内容