Jquery可调整大小页面加载后不工作
jquery resizable not working after page load
我有一个在localStorage中存储文档主体html的页面。当页面重新加载时，它应该(并且确实)将内容放在重新加载之前的相同位置。我可以拖动、排序和调整大小，直到刷新页面。之后，拖动和排序继续工作，但调整大小失败。
我自己想出来的，没有那些负面选民的帮助。问题在于如何存储jquery的可调整大小。我必须在页面重新加载时删除添加的元素
编辑
有一个附加标签的功能问题(由resizable创建)。以下是作为body的html保存到本地存储的内容:
<header>
<div id="pgtitle">How much in a day?</div>
<div id="login">Bob</div>
<div id="urname">
<div>What is your name?</div>
<input id="name">
<button type="button" id="button">Submit</button>
</div>
</header>
<div id="greeting"></div>
<br>
<div style="position: relative; left: 162px; top: 28px;" class="drag ui-draggable">
<div class="header">
<span style="color:white;">Quicklinks </span>
<span style="color:white;width:10px" id="minmin" class="min">(X)</span>
</div>
<div style="width: 577px; height: 312px;" id="mymenu" class="ui-widget-content ui-resizable">
<button id="add">Add</button>
<button id="remove">Remove</button>
<br><br>
<div id="addmenu" style="position:absolute;">
<input id="itemname" placeholder="Enter name here" autocomplete="off">
<input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off">
<button id="itemsubmit">Submit</button>
</div>
<div id="rmmenu" style="position:absolute;">
<input id="rmitemname" placeholder="Item name" autocomplete="off">
<button id="rmitemsubmit">Submit</button>
</div>
<div class="ui-sortable" id="mylinks"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
</div>
</div>
<div id="mynextmenu"></div>
所以问题是下面保存的部分，但我不知道为什么它会破坏东西或者为什么它甚至在那里:
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div>
<div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
下面是我最初遇到问题时的内容:
下面是一段jquery代码: $(function() {
if ( localStorage.mypage ) { $("body").html(localStorage.mypage); }
$(".drag").draggable({ handle:'.header'})
$("#mymenu").resizable();
$( "#mylinks" ).sortable();
$( "#mylinks" ).disableSelection();
setInterval(function(){
var mypage = $('body').html();
localStorage.mypage = mypage
},1000);
});
这也是正文的一个片段:
<body>
<div class="drag">
<div class="header">
<span style="color:white;">Quicklinks </span>
<span style="color:white;width:10px" id="minmin" class="min">(X)</span>
</div>
<div id="mymenu" class="ui-widget-content">
<div id="mylinks"></div>
</div>
</div>
</body>
内容如下:
<!DOCTYPE html>
<html>
<head>
<title>In a day</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
html, body { margin:0px; }
header { position:absolute; top:0px; left:0px; background: -moz-linear-gradient(#457995,#1C4961); color:white; height:30px; width:100%; }
#pgtitle { position:absolute; top: 3px; left:20px; }
#login { position:absolute; top: 3px; right:30px; }
#urname { position:absolute; padding:10px; display: none; top: 30px; right:0px; width: 230px; height: 60px; background:#1C4961; color: white; }
#greeting { margin:0; margin-top:30px; text-align: center; background: #1C4961; color: white; }
#mymenu { padding:10px; width: 250px; background: #457995; min-height: 20px; }
#addmenu { display: none; }
#rmmenu { display: none; }
#mylinks div { margin:3px; }
.menuitems { background:lightgray;border:1px outset white; }
.header { width:100px;background:#1C4961;height:20px;margin:0px; }
</style>
<script>
$(function() {
//check if cached page info and load if so
if ( localStorage.mypage ) { $("body").html(localStorage.mypage); }
//$("#mylinks").html(localStorage.mylinks);
//localStorage.removeItem("mypage");
//toggle login name and let change if needed
$("#login").click(function() { $("#urname").toggle(); });
var xman = $("#login").text()
if ( localStorage.myname ) {
$("#login").text(localStorage.myname);
}
else { $("#login").text("Login"); }
//Greeting for new user
$("#button").click(function() {
var truname = $("#name").val()
$("#greeting").text("Hello " + truname + " Welcome to my site!!");
$("#login").text(truname);
$("#name").val("")
$("#urname").hide();
localStorage.myname = truname
});
//save links info
$("#itemsubmit").click(function() {
var itemname = $("#itemname").val()
var itemlink = $("#itemlink").val()
$("#mylinks").append("<div id='" + itemname + "' class='menuitems'><a href='" + itemlink + "' target='_blank'>" + itemname + "</a></div>");
var mylinks = $("#mylinks").html()
localStorage.mylinks = mylinks
$("#addmenu").hide()
});
$("#add").click(function() {
$("#addmenu").toggle();
$("#rmmenu").hide()
});
$("#remove").click(function() {
$("#rmmenu").toggle();
$("#addmenu").hide()
});
$("#rmitemsubmit").click(function() {
var rmitm = "#" + $("#rmitemname").val()
$(rmitm).remove()
$("#rmmenu").hide()
var mylinks = $("#mylinks").html()
localStorage.mylinks = mylinks
});
$(".drag").draggable({ handle:'.header'})
// setTimeout(function() {
$("#mymenu").resizable();
//},2000);
$( "#mylinks" ).sortable();
$( "#mylinks" ).disableSelection();
$(".min").click(function() {
$(this).parents().find('#mymenu').slideToggle();
});
setInterval(function(){
var mypage = $('body').html();
localStorage.mypage = mypage
},1000);
});
</script>
</head>
<body>
<header>
<div id="pgtitle">How much in a day?</div>
<div id="login"></div>
<div id="urname">
<div>What is your name?</div>
<input id="name">
<button type="button" id="button">Submit</button>
</div>
</header>
<div id="greeting"></div>
<br>
<div class="drag">
<div class="header">
<span style="color:white;">Quicklinks </span>
<span style="color:white;width:10px" id="minmin" class="min">(X)</span>
</div>
<div id="mymenu" class="ui-widget-content">
<button id="add">Add</button>
<button id="remove">Remove</button>
<br><br>
<div id="addmenu" style="position:absolute;">
<input id="itemname" placeholder="Enter name here" autocomplete="off">
<input id="itemlink" placeholder="Enter hyperlink here" autocomplete="off">
<button id="itemsubmit">Submit</button>
</div>
<div id="rmmenu" style="position:absolute;">
<input id="rmitemname" placeholder="Item name" autocomplete="off">
<button id="rmitemsubmit">Submit</button>
</div>
<div id="mylinks"></div>
</div>
</div>
<div id="mynextmenu"></div>
</body>
</html>
我假设你的代码片段顶部的所有代码都在<script>标记内?
试着把所有的脚本移到页面的底部，在dragdiv之后。这样，你的jquery会在它们被写完后找到它们。
尝试如下包装，等待DOM准备好:
if ( localStorage.mypage ) { $("body").html(localStorage.mypage); } // this outside the function wrapper. You have it inside.
$(function () { // wait for domready
$(".drag").draggable({ handle:'.header'})
$("#mymenu").resizable();
$("#mylinks").sortable().disableSelection();
setInterval(function(){
var mypage = $('body').html();
localStorage.mypage = mypage;
},1000);
});
一旦页面加载，然后使用下面的jquery删除不需要的div$ ("div.ui-resizable-handle ") .remove ();$ ("div.ui-resizable-n ") .remove ();
相关文章：
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript链接在点击时不起作用;函数在页面加载时工作
- jQuery加载的async和ready函数不工作
- Javascript不工作/正在加载
- LokiJS自动加载回拨不工作
- 当加载几个js文件时，defer属性应该如何工作
- 在pjax完成其工作时加载脚本
- Scriptaculous dom:仅加载工作"有时“;
- 为什么动态加载的事件在我的代码中不能正常工作
- 加载Soundcloud嵌入式播放器OnClick在FireFox中不工作
- 我无法在发布页面上加载peoplepicker.js它'正在工作的SitePages
- 异步加载的SVG过滤器feColorMatrix在Chrome中工作，而不是在Safari或Firefox中
- php的ajax加载工作不正常
- 使弹出加载工作
- 如何控制页面加载工作流程
- 检查脚本是否加载工作有时
- 试图让jquery加载工作
- 如何es6模块加载工作
- 外部.js文件正在加载&工作，但jQuery在它不工作
- jQuery fn()正在加载/工作
