Jquery按钮单击未触发的事件
Jquery按钮单击未触发的事件
提问于 2014-02-25 03:35:20
我创建了jquery滑动效果。消息来源是来自jsfiddle http://jsfiddle.net/YNAJZ/68/。它在小提琴里工作得很好。但不能在我的系统里工作。按钮单击事件未被触发。我花了更多的时间，但我找不到为什么它不起作用。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
#container {
width:100%;
height:500px;
background:#ccc;
position:relative;
overflow-x:hidden;
}
#left {
position:absolute;
width:100%;
height:500px;
left:0px;
background:yellow;
}
#right {
position:absolute;
width:100%;
height:500px;
background:red;
right:0%;
}
</style>
<script>
$('#Viewstruct,#viewgrid').click(function(){
alert('enter here');
if (parseInt($('div#right').css('right'),10) < 0) {
// Bring right-column back onto display
$('div#right').animate({
right:'0%'
}, 1000);
$('div#left').animate({
width:'100%'
}, 600);
} else {
// Animate column off display.
$('div#right').animate({
right:'-100%'
}, 600);
$('div#left').animate({
width:'100%'
}, 1000);
}
});
</script>
</head>
<body>
<a id="Viewstruct" title="View Structure" rel="tooltip" href="#">View Structure</a><a id="viewgrid" data-original-title="View Grid" href="#" title="View Grid">View Grid</a>
<div id="container">
<div id="left"> LEFTgdsfgsdfgdsfg</div>
<div id="right"> RIGHT FADASSD ASDAJKSH ASHDK:L JASKDJ ASKLJSDKJA ASKJD KAJSDKJAS LKJDKLAJ LAKSJD AKLJD KASJDK JALSKDJ LKAJSDLK JASDKLJ ASLKDJ AKLSJD LKASJD LKASJD LKJASD KJAS LKASJ DKASJDK JAS KLDJASDKJ ASLK </div>
</div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-25 03:37:28
请将您的点击功能放入就绪块中。
$( document ).ready(function() {
$('#Viewstruct,#viewgrid').click(function(){
alert('enter here');
if (parseInt($('div#right').css('right'),10) < 0) {
// Bring right-column back onto display
$('div#right').animate({
right:'0%'
}, 1000);
$('div#left').animate({
width:'100%'
}, 600);
} else {
// Animate column off display.
$('div#right').animate({
right:'-100%'
}, 600);
$('div#left').animate({
width:'100%'
}, 1000);
}
});
});Stack Overflow用户
发布于 2014-02-25 03:35:54
您需要将代码放入DOM就绪处理程序$(document).ready(function() { ... })或更短的表单：$(function() {.... });中。此步骤用于确保页面文档对象模型(DOM)已准备好供JavaScript代码执行。
您的代码在jsFiddle中工作，因为jsFiddle已经为您自动完成了它。
此外，在使用jsFiddle时，不需要链接到External Resources中的外部jQuery文件。您可以通过从jQuery选项卡中选择它来包含Frameworks and Extensions。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22004047
复制相关文章
相似问题
腾讯云开发者
