0

I have a layout like:

<header class="header">
    <div class="logo">Logo Here</div>
    <nav class="menu">Menu Here</nav>
</header>

<div class="container">
    <aside class="aside">
        <!-- Here are the Buttons that Filters the Content in .main-content class -->
    </aside>
    <div class="main-content">
        <!-- The list of contents here are shown according to the filter in sidebar -->
        <!-- The contents are lets say only tables and Ajax button does its filter -->
        <div class="export-link">Export Link</div> <!-- This export list is created by Ajax and for every filter value the link changes -->
    </div>
</div>

<footer class="footer">
    <div class="some-links">Some Links</div>
</footer>

I want that div.export-link to place in nav.menu.

At first I did something like

if($('.new__nav-class').length === 0 ){
    $('.menu, .export-link').wrapAll('<div class="new__nav-class"> </div>');
}

This places the div.export-link and nav.menu inside new div.new__nav-class in the header section, and I can apply CSS to make it pretty.

However the problem is it doesn't take the filter value anymore. The link inside the .export-link used to change according to the filter like href="/page?Thisfilter-Thatfilter", but since I put the wrapper in top of the div and placed it in the menu, the link has become static.

Any solution how to fix this?

4

3 回答 3

0

我认为您可以使用 ajaxStop 事件来查看链接是否已更改并将其复制到您想要的新 div 中。ajaxStop 是每当向页面返回 ajax 响应时发生的事件。下面的 javascript 说要等待 ajax 响应。发生响应时，获取#old-div 中的html 并将其放入#new-div 中：

<html>
<head></head>
<body>
  <header>
    <div id="new-div"></div>
  </header>
  <div class="other-container">  
    <div id="old-div">link stays updated here</div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $(document).ajaxStop(function() {
        var link = $('#old-div').html();
        $('#new-div').html( link );
      });
    });
  </script>
</body>
</html>
于 2013-11-03T18:27:32.680 回答
0

Position: absolute 如果您只需要将字段移动到页面上的其他位置，那么您可能会很好。只需将其父位置设为：相对，它应该适合所有浏览器。（当然，你会想要检查。）

于 2013-10-31T17:57:30.517 回答
0

检查您的 DocType

尝试使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或者<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

于 2013-10-30T18:36:13.787 回答