在ajax导航页面中,用于执行初始化javascript的经典"文档就绪"表单根本不会触发.
在ajax加载的页面中执行某些代码的正确方法是什么?
(我的意思是,不是我的ajax ......它是jquery移动页面导航系统,它带我到那个页面)
好吧,我确实怀疑过这样的事情......非常感谢=)但是......它仍然不起作用,这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Run Code Online (Sandbox Code Playgroud)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mypage</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
$('div').live('pageshow',function(event, ui){
alert('ciao');
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Shopping Cart</h1>
</div>
<div data-role="content"> asd
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
我需要指定div id吗?
这很可能已经是某个地方的问题了,但我无法找到它,因为每次搜索都会出现jQuery问题.
我正在寻找一种经过验证的方法来绑定到准备好的文档,就像jQuery一样$(document).ready().但是,这是一个"仅限现代浏览器"页面,具有非常轻量级的JavaScript,我想避免在这里加载jQuery.
有人会指出我正确的方向吗?
谢谢!
我已经尝试了所有生命周期钩子但无法完成所需的结果.我需要的结果是在加载这些元素(组件)中的每一个之后触发一个函数,该函数初始化用于单个页面上的不同元素的许多jquery插件.
所以我们说你有这种结构.
主页滑块小部件产品旋转器..等等
这些元素中的每一个都有自己的组件,并且都是主页父组件的子组件.
我需要的是知道所有子组件和父组件何时被加载,所以我触发一个jquery函数来初始化页面上的每个插件.
Google Closure库团队成员声称等待DOMContentReady事件是一种不好的做法.
简短的故事是我们不想等待DOMContentReady(或更糟糕的加载事件),因为它会导致糟糕的用户体验.在从网络加载所有DOM之前,UI不响应.因此,首选方法是尽快使用内联脚本.
由于他们仍然没有提供更多关于此的细节,所以我想知道他们如何处理IE中的Operation Aborted对话框.这个对话框是我知道等待DOMContentReady(或load)事件的唯一关键原因.
javascript internet-explorer document-ready domready google-closure-library
很抱歉,如果之前已经回答了这个问题,但是所有搜索都会讨论差异,而不是将两者结合使用,如果可能的话.
简单来说,可以$(window).load.(function() {})用INSIDE $(document).ready.(function() {})吗?
在加载DOM之后我应该做一些事情但是我想在图像加载完成后才显示某些元素.在Explorer 8中唯一有效的方法是将$(window).load函数放在$(document).ready其他所有内容中.
这是可接受的做法吗?
我只想使用最可接受的方法来显示DIV包含小图像的小图像,如完全构造后的工具栏.(例如,visibility hidden对比display none).用于此的HTML DIV由内部代码编写$(document).ready,然后在使用$('body').append()之前使用附加到正文$(window).load.
我在Explorer 8中遇到了很多问题.
假设我想在jQuery Mobile完成渲染UI后运行一些代码.该mobileinit事件不会工作,因为它提出了之前发生这种情况.快速谷歌搜索似乎表明,简单使用$(document).ready将无法与JQM一起使用; 但我只是尝试了它(后面称之为mobileinit)并且它对我有用:我的代码运行并动态更新元素等等.所以我想知道,是否有一些原因我不应该使用它(它不可靠或混淆JQM),或者那里有关于它的信息根本不准确?我错过了什么?
更新:请参阅此处进行演示.
我正在使用jQuery JavaScript库.我喜欢的事件监听器准备好上$(document)时DOM设置将触发.
(非常类似于.onload但没有外部源)
我会发现它非常有用,如果有一个事件监听器与此行为非常相似,但在元素完全加载时触发.(fe:图片,文字内容极长的Div,如此)
我很欣赏jQuery或JavaScript方法.
我在aspx页面中使用fancybox.文档就绪功能在此页面中不适用于灯箱.有人告诉我要写一个新的javascript代码来加载该页面中的灯箱.
我一直在实现yepnope脚本加载器作为modernizr.js库的一部分.之后我成功地加载了jQuery以加载jQuery依赖脚本.我是异步加载资源的新手,所以对我来说这有点新鲜.我一直在四处寻找,但是下面没有太多运气.
我的问题是,在使用yepnope.js框架时,您对如何有效替换$(document).ready()的功能有何看法?
我的理论是在我的基础库中创建一个适当命名的函数,然后在我的页面上将该变量设置为包含我现有的$(document).ready()代码的匿名函数.在所有脚本加载到完整回调之后,yepnope将调用此变量.
你是否同意这是一个很好的方法,或者我是否完全以错误的方式接近这个?
(对于那些不知道的人,yepnope.js的异步性质意味着文档在yepnope加载器完成之前调用$或jQuery,抛出"$ is undefined"错误< - 如果错误请纠正我.)
第一个问题,希望它是一个好的.
javascript jquery document-ready asynchronous-loader yepnope
我的onclick活动有效.但是,当onclick事件在动态HTML上时,它不再有效.如:没有任何反应.
$(document).ready(function () {
$("#guestlist .viewguestdetails").click(function () {
$(".guestdetails[data-id='18']").toggle();
});
});
Run Code Online (Sandbox Code Playgroud)
然后我将动态添加到页面中:
<div id="guestlist">
<span class="completeguestdetails" data-id="18">(add your data)</span>
<div class="guestdetails" data-id="18" style="display: none;">
some data
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
但是,当我点击"(添加您的数据)"时,没有任何反应.当我在我的页面中静态地使用HTML时,这个'guestdetails'div的切换确实有效.似乎动态插入的HTML没有附加事件?
更新:
新的动态HTML我在一个现有的表中插入一行.其他行已经附加到onclick事件的事件,如:
$("span.guestattendance").click(function () {
if ($(this).hasClass('checkbox-on')) {
$(this).removeClass('checkbox-on').addClass('checkbox-off');
$("#guestday").removeClass('checkbox-on').addClass('checkbox-off');
}
else {
$(this).removeClass('checkbox-off').addClass('checkbox-on');
if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') &&
$("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) {
$("#guestday").removeClass('checkbox-off').addClass('checkbox-on');
}
}
});
Run Code Online (Sandbox Code Playgroud)
由于用户可以插入多于1行,我没有使用id,而是在我插入的元素周围添加了一个包装器:
然后在ready()函数中:
$('.newrow_wrapper').on('click', 'span', function () {
$(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});
Run Code Online (Sandbox Code Playgroud)
然而,第一个问题是,当我在tr标签周围包装div时,所有tr和td标签都会从插入的HTML中删除!此外,当我单击跨度查看guestdetails时没有任何反应.
document-ready ×10
jquery ×7
javascript ×4
onload ×2
ajax ×1
angular ×1
asp.net ×1
components ×1
dom ×1
domready ×1
fancybox ×1
html5 ×1
image ×1
load ×1
yepnope ×1