2

我想使用 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;
    });

});

//shadowbox function show_box(html) { Shadowbox.open({ content: html, player: "html", height: 350, width: 350 }); }

更新 2

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

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

4

2 回答 2

1

需要跑

Shadowbox.setup('h2 a');

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

于 2012-08-28T21:05:08.957 回答
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;
});

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

于 2010-02-03T13:50:10.660 回答