2013-11-23 27 views
0

我有一個包括留言板帖子的股利。我使用jQuery和Ajax來改變div中的頁面。但是,當頁面發生變化時,它會丟失與JavaScript文件的鏈接,以便下次嘗試更改頁面時,它實際上會繼續執行鏈接操作,而不是在後臺執行ajax。之後,它恢復正常,並在鏈接到文件之間來回切換,而不是。刷新div與Ajax失去鏈接到JavaScript文件

此外,它正在渲染整個頁面,以便我的佈局顯示在刷新上,而不是隻是留言板帖子。我猜,最後得到刷新而不再顯示整個佈局是什麼導致它失去了與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_arrows中的鏈接將ajax請求發送到更改會話變量的頁面。包含帖子本身的div(refresh_me)以及箭頭(用於鏈接)被刷新。在改變頁面一次後,這個留言框不再連接到javascript文件,所以當你再次點擊改變頁面而不是ajax請求時,頁面本身實際上改變爲鏈接。

任何想法如何解決這個問題?我在這方面花了很多時間,這讓人頗感沮喪。我覺得我可能剛剛解決它,因爲它是現在,但它太麻煩我太多,它沒有按我打算的方式工作(儘管通常它在改變頁面方面)。

也只是一個說明,我用jsfiddle來整理代碼,但它看起來像它做了一些時髦的東西(只看$ current_page = s tr_replace)。大聲笑。所以如果這就是你的想法,那麼就沒有任何語法錯誤。 > < 另外我打算設置一個小提琴,但我不知道如何處理鏈接,所以它沒用。

回答

2

問題是,您將點擊處理程序綁定到文檔就緒(您提供的jQuery代碼)上的a標記。因此,當您替換#shoutbox_arrows的內容時,您將刪除之前附加的點擊處理程序,因爲這些原始處理程序將與原始元素一起從DOM中刪除。

您需要使用jQuery .on() methodevent 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>", ""); 
    }); 
}); 
+0

工作就像一個魅力!謝謝。 – Niketa