Question

我有一个简单的jquery片段来加载div：

jQuery(document).ready(function($) {
  $(".mob-nav").insertAfter(".primary-nav");
})

我注意到，当重新调整浏览器大小时，它会将div恢复到原始位置，因此希望在浏览器重新调整大小时重新加载上面的jquery片段。我试过了：

$Query(window).resize( function() {

$(".mob-nav").insertAfter(".primary-nav");

});

和

window.onresize = function(event) {

    $(".mob-nav").insertAfter(".primary-nav");

}

但似乎都不起作用。

Answer 1

首先，定义一个在.mob-nav之后插入.primary-nav的函数。

function setupNav() {
    $(".mob-nav").insertAfter(".primary-nav");
}

然后，您可以使用该函数在页面加载和窗口大小调整上添加事件侦听器。

$(setupNav);
$(window).resize(setupNav);

Answer 2

调整浏览器窗口大小本身并不会将<div>元素移动到DOM中的其他位置（即，它不会“物理地”将<div>重新定位回页面加载时的位置）。这当然是除非你在其他地方有更多 javascript导致它，在这种情况下我会建议找到该脚本并修改它。

然而，调整大小可能会影响<div>的视觉外观，具体取决于您的CSS（特别是媒体查询，如果您使用它们）。如果问题与CSS有关，那么jQuery可能不是你想要处理问题的地方 - 你需要找到麻烦的CSS并修复它。

我会指出你的问题中有拼写错误。你尝试的第一个例子应该是：

jQuery(window).resize( function() {
    $(".mob-nav").insertAfter(".primary-nav");
});

这可能会解决您的问题，但我强烈建议您查看任何与CSS相关的问题，因为从您的问题本身来看，这听起来并不是真正的解决方案。

Answer 3

你需要一个去抖... Underscore有一个非常好的... resize方法返回太多回调，太快了......如果你试试这个，你可以在你的控制台中看到它。

你可以在这里看到这种行为： https://jsfiddle.net/leojavier/35zhogh4/

var i = 0;
$(window).resize(function(){
console.log(i);
    i++
});

这是辩护人的行为： https://jsfiddle.net/leojavier/xjj3os8d/

var i = 0;
var lazyLayout = _.debounce(message, 300);

function message(){
 console.log(i);
    i++;
}
$(window).resize(function(){lazyLayout()});

要添加DIV，只需将元素附加到父级： https://jsfiddle.net/leojavier/35zhogh4/1/

<button>add Element</button>
<section class="container"></section>

JS

var html = '<div></div>';
$('button').on('click', function(){
    $('.container').append(html)
})

CSS

div{
    width:50px;
    height:50px;
    border:thin solid #CCC;
    margin:5px;
    display:inline-block;
}

Answer 4

通过包装在jQuery（document）.ready（function（$）{

中解决

以下是有效的代码段：

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
 <div id="log"></div>

浏览器重新调整大小后如何重新加载Jquery？

4 个答案: