Question

我有一个包含shoutbox帖子的div。我正在使用jQuery和ajax来更改div中的页面。但是，当页面发生更改时，它会丢失指向javascript文件的链接，以便下次尝试更改页面时，它实际上会继续执行链接操作，而不是在后台执行ajax。然后它恢复正常，它在链接到文件之间来回交替，而不是。

此外，它正在渲染整个页面，以便我的布局显示在刷新而不仅仅是shoutbox帖子上。我猜测最终让它刷新而不再重新显示整个布局是导致它失去与javascript文件的连接的原因。

这是帖子的代码。 shoutbox_arrows包含用于更改页面的链接。 refresh_me是我加载到我的div中以刷新内容。

<div id="shoutbox_arrows">
    <?php $current_page=s tr_replace( '?', '@', getURI(fullURL())); ?>
    <ul class="no_dots">
        <li id="first_page"><a href="<?php echo relativeLink('refresh') . '?page=1&redirect=' . $current_page; ?>">&lt;&lt;</a>
        </li>
        <li id="previous_page"><a href="<?php echo relativeLink('refresh') . '?page=' . $previous_page . '&redirect=' . $current_page; ?>">&lt;</a>
        </li>
        <li><strong>Pg#<?php if ($page > $last_page) {echo $last_page;} else {echo $_SESSION['shoutbox_page'];} ?></strong>
        </li>
        <li id="next_page"><a href="<?php echo relativeLink('refresh') . '?page=' . $next_page . '&redirect=' . $current_page; ?>">&gt;</a>
        </li>
        <li id="last_page"><a href="<?php echo relativeLink('refresh') . '?page=' . $last_page . '&redirect=' . $current_page; ?>">&gt;&gt;</a>
        </li>
    </ul>
</div>
<div id="shoutbox" class="custom_scrollbar">
    <div id="refresh_me">
        <?php if (sizeof($shouts)==0 ) { ?>
        <p>There are no posts.</p>
        <?php } foreach ($shouts as $shout) { foreach ($shout as $k=>$v) { $shout[$k] = utf8_encode($v); if ($k == 'guest') { $shout[$k] = ucwords($v); } } ?>
        <div class="post_info">
            <div class="left">
                <?php if ($shout[ 'user_id']==n ull) {echo $shout[ 'guest'];} else { ?><a href="<?php echo relativeLink('users/profile'); ?>?id=<?php echo $shout['user_id']; ?>"><?php echo ucwords(userinfo($shout['user_id'])->username); ?></a>
                <?php } ?>
            </div>
            <div class="right">
                <?php time_format($shout[ 'created_at']); ?>
            </div>
        </div>
        <p class="post_comment" id="shoutbox_comment_<?php echo $shout['id']; ?>">
            <?php echo $shout[ 'comment']; ?>
        </p>
        <?php if (!$shout[ 'last_edited_by']==n ull) { ?>
        <p class="last_edited">Edited by
            <?php echo ucwords(userinfo($shout[ 'last_edited_by'])->username); ?>
            <?php time_prefix($shout[ 'updated_at']); ?>
            <?php time_format($shout[ 'updated_at']); ?>.</p>
        <?php } ?>
        <?php if (current_user()) { if (current_user()->user_id == $shout['user_id'] or current_user()->is_mod) { ?>
        <p class="post_edit">   <span class="edit" id="<?php echo $page; ?>">
                    <a id="<?php echo $shout['id']; ?>" href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
                        edit
                    </a>
                </span> |   <span class="delete" id="<?php echo $page; ?>">
                    <a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
                        delete
                    </a>
                </span>
    <span class="hide" id="<?php echo $page; ?>">
                    <?php if (current_user()->is_mod) { ?> | <a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
                        hide
                    </a><?php } ?>
                </span>

        </p>
        <?php }} ?>
        <?php } ?>
    </div>
</div>

这是我的ajax请求的页面。

<?php

if (isset($data['page'])) {
    $_SESSION['shoutbox_page'] = intval($data['page']);
}

$redirect = ltrim(str_replace('@', '?', $data['redirect']), '/');

redirect_to($redirect);

包含要刷新的内容的Div。

<div id="shoutbox_container">
    <?php relativeInclude( 'views/shoutbox/shoutbox'); ?>
</div>

的jQuery

$('#shoutbox_arrows ul li a').click(function (event) {
    event.preventDefault();
    $.post('views/shoutbox/' + $(this).attr('href'), function (data) {
        $('#refresh_me').load(location.href + " #refresh_me>", "");
        $('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
    });
});

所以我想澄清一下这个问题： shoutbox_container显示了shoutbox的帖子。该页面由一个会话控制器，该会话作为变量传递以获取要显示的正确帖子块。单击shoutbox_arrows中的链接会向更改会话变量的页面发送ajax请求。包含帖子本身的div（refresh_me）以及箭头（用于链接）将被刷新。更改页面一次后，shoutbox不再连接到javascript文件，因此当您再次单击更改页面而不是ajax请求时，页面本身实际上会更改为链接。

我有什么想法可以解决这个问题？我花了很多时间在这上面，而且变得相当令人沮丧。我觉得我可能只是满足于它现在，但它太烦我了，它不能完全按照我的意图工作（尽管通常它在改变页面方面起作用）。

另外只是一个注释，我使用jsfiddle来整理代码，但看起来它做了一些时髦的东西（只看$ current_page = s tr_replace）。大声笑。因此，如果您正在考虑的话，那么没有任何语法错误。＆GT;＆LT; 此外，我打算设置一个小提琴，但我真的不知道如何处理链接，所以它将是无用的。

Answer 1

问题是您将单击处理程序绑定到文档就绪的a标记（您提供的jQuery代码）。因此，当您替换#shoutbox_arrows的内容时，您将删除之前附加的点击处理程序，因为这些原始处理程序与原始元素一起从DOM中删除。

您需要使用jQuery .on() method和event bubbling。这会将处理程序附加到不会在内容替换中删除的父元素上，并且可以继续“监视”事件从子元素元素中冒出来。

尝试用以下代码替换你的jQuery代码：

$('#shoutbox_arrows').on('click', 'ul li a', function (event) {
    event.preventDefault();
    $.post('views/shoutbox/' + $(this).attr('href'), function (data) {
        $('#refresh_me').load(location.href + " #refresh_me>", "");
        $('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
    });
});

Answer 2

为了提高性能，您应该为a添加一个类，并使用$（'a.aClass'）

直接定位它

Good ways to improve jQuery selector performance?

使用ajax刷新div会丢失到javascript文件的链接

2 个答案: