Question

我创建了一个jquery滑动效果。来自jsfiddle http://jsfiddle.net/YNAJZ/68/的来源。它在jsfiddle工作正常。但不能在我的本地系统中工作。按钮点击事件未触发。我花了更多时间，但我找不到为什么它不起作用。

<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>

Answer 1

您需要将代码放在DOM就绪处理程序$(document).ready(function() { ... })或更短格式：$(function() {.... });中。此步骤用于确保页面文档对象模型（DOM）已准备好执行JavaScript代码。

您的代码在jsFiddle中有效，因为jsFiddle已经自动为您完成了。

此外，使用jsFiddle时，您无需链接到External Resources中的外部jQuery文件。您可以从Frameworks and Extensions选项卡中选择jQuery来包含jQuery。

Answer 2

请将您的点击功能放入就绪块

$( 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);
        }

});

});

Jquery按钮单击事件未触发

2 个答案: