$("id").click()不管用解决方案

2013-01-23

$(id).click()不管用本帖最后由 chaoowang 于 2013-01-16 20:57:39 编辑找了半天没找出是什么问题，各位

$("id").click()不管用
本帖最后由 chaoowang 于 2013-01-16 20:57:39 编辑找了半天没找出是什么问题，各位帮着看看吧，var t=$("#temp").click(function(){alert("1");});单击事件不管用

<html>
<head>
<title></title>
<style type="text/css">
#page{
width:1020px;
margin-left:auto;
margin-right: auto;
}
.nav1{
float:left;
}
li{
list-style-type:none;
}

</style>
<script language="javascript" src="jquery-1.7.2.js" type="text/javascript" ></script>
<script language="javascript" src="jquery162.js" type="text/javascript" ></script>
<script language="javascript" type="text/javascript">
$("#topmenu .nav1 li a").bind('click',function(){alert(1);});
var t=$("#temp").click(function(){alert("1");});
var util={
openSecondMenu:function(e){
var targetName=e.target.name;
switch(targetName)
{
case "f1":
window.position="f1";
$("#second_menu").append("<li><a name='s1'>呼叫记录1</a></li>");
$("#second_menu").append("<li><a name='s2'>呼叫记录2</a></li>");
break;
case "f2":

break;
case "f3":

break;
case "f4":

break;
case "f5":

break;
case "f6":

break;
case "f7":

break;
case "f8":

break;
case "f9":

break;
default:break;
}
}

}
</script>
</head>
<body>
<div id="temp" style="background-color:red;">aaa</div>
<div id="page">
<table>
<tr id="menu">
<div id="top" id="topmenu">
                        <div class="nav1">
                            <li>
                                <a name="f1">话单记录</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f2">呼叫分析</a>
                            </li> 
 
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f3">坐席报表</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f4">队列报表</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f5">实时分析</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f6">语音导航</a>
                            </li>
                        </div>
                        <div class="nav1"> 
 
                            <li>
                                <a name="f7">短信报表</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f8">传真报表</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f9">其他报表</a>
                            </li>
                        </div>
                        <div style="clear:both;"></div>
            </div>
</tr>
<tr id="content">
<td valign="top" width="125px" height="800px">
<div height="800px" id="second_menu" class="nav">
<li>
<a>呼叫记录1</a>
</li>
</div>
</td>
<td>
<iframe width="895px" height="800px" frameborder="0" src="http://192.168.100.20/admin/cdr/cdr.php?s=0" valign="top">
</iframe>
</td>
</tr>
</table>
</div>
</body>
</html>

[解决办法]

引用:

本帖最后由 chaoowang 于 2013-01-16 20:57:39 编辑
找了半天没找出是什么问题，各位帮着看看吧，var t=$("#temp").click(function(){alert("1");});单击事件不管用

XML/HTML code?12345678910111213141516171819202122232……

页面没有加载完是找不到dom对象的
另外修改下div的id，有两个
然后就ok了


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#page{
width:1020px;
margin-left:auto;
margin-right: auto;
}
.nav1{
float:left;
}
li{
list-style-type:none;
}

</style>
 <script language="javascript" src="jquery-1.7.2.js" type="text/javascript" ></script>
        <script language="javascript" src="jquery162.js" type="text/javascript" ></script>

</head>
<body>
<div id="temp" style="background-color:red;">aaa</div>
<div id="page">
<table>
<tr id="menu">
<div id="topmenu">
                        <div class="nav1">
                            <li>
                                <a name="f1">话单记录</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f2">呼叫分析</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f3">坐席报表</a>
                            </li>
                        </div> 
 
                        <div class="nav1">
                            <li>
                                <a name="f4">队列报表</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f5">实时分析</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f6">语音导航</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f7">短信报表</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li> 
 
                                <a name="f8">传真报表</a>
                            </li>
                        </div>
                        <div class="nav1">
                            <li>
                                <a name="f9">其他报表</a>
                            </li>
                        </div>
                        <div style="clear:both;"></div>
            </div>
</tr>
<tr id="content">
<td valign="top" width="125px" height="800px">
<div height="800px" id="second_menu" class="nav">
<li>
<a>呼叫记录1</a>
</li>
</div>
</td>
<td>
<iframe width="895px" height="800px" frameborder="0" src="http://192.168.100.20/admin/cdr/cdr.php?s=0" valign="top">
</iframe>
</td>
</tr>
</table>
</div>
</body>
<script language="javascript" type="text/javascript">
debugger;
$("#topmenu .nav1 li a").bind('click',function(){alert(1);});
var t=$("#temp").click(function(){alert("1");});
var util={
openSecondMenu:function(e){
var targetName=e.target.name;
switch(targetName)
{
case "f1":
window.position="f1";
$("#second_menu").append("<li><a name='s1'>呼叫记录1</a></li>");
$("#second_menu").append("<li><a name='s2'>呼叫记录2</a></li>");
break;
case "f2":

break;
case "f3":

break;
case "f4":

break;
case "f5":

break;
case "f6":

break;
case "f7":

break;
case "f8":

break;
case "f9":

break;
default:break;
}
}

}
</script>
</html>

[解决办法]
首先要明确一点浏览器解析html代码是有向后顺序的，

<script language="javascript" type="text/javascript">
            $("#topmenu .nav1 li a").bind('click',function(){alert(1);}); 
 
            var t=$("#temp").click(function(){alert("1");});
             。。。。。。。。。。。。。。。
            }
</script>

这里的代码执行的时候body中的元素还没有加载，所以无法找到这个$("#temp")对象。

该段js要么卸载<div?id="temp"?style="background-color:red;">aaa</div>这句之后；
要么就卸载onload事件中。
[解决办法]
别纠结了，你把javascript 入在ready方法里面就可以，改成这样：

<script language="javascript" type="text/javascript">
        $(document).ready(function(){
        $("#topmenu .nav1 li a").bind('click',function(){alert(1);});
            var t=$("#temp").click(function(){alert("1");});
            var util={
                openSecondMenu:function(e){
                    var targetName=e.target.name;
                    switch(targetName)
                    {
                        case "f1":
                            window.position="f1";
                            $("#second_menu").append("<li><a name='s1'>呼叫记录1</a></li>");
                            $("#second_menu").append("<li><a name='s2'>呼叫记录2</a></li>");
                        break;
                        case "f2":

                        break;
                        case "f3":

                        break;
                        case "f4":

                        break;
                        case "f5":

                        break;
                        case "f6":

                        break;
                        case "f7":

                        break;
                        case "f8":

                        break;
                        case "f9":

                        break;
                        default:break;
                    }
                }

            }
        });

        </script>
[解决办法]
jquery对页面元素的操作，都要以匿名函数的方式写在document的ready事件里。或者在document.ready事件之后

热点排行

JavaScript

$("id").click()不管用解决方案