首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

第一回点击执行一次,第二次点击执行二次。是什么原因

2012-08-29 
第一次点击执行一次,第二次点击执行二次。是什么原因代码如下:HTML code!DOCTYPE html PUBLIC -//W3C//DT

第一次点击执行一次,第二次点击执行二次。是什么原因
代码如下:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><title>无标题文档</title><style type="text/css">    ul{ list-style-type:none;width:150px;float:left;}    li{ list-style-type:none; width:150px; text-align:center;}</style><script type="text/javascript">            /*    function load(){        var divs = document.getElementsByTagName("DIV");        for (var i=0;i<divs.length;i++){            alert(divs[i].id);                        }    }*/    //左移        function moveLeft(obj){                //alert("divX=="+obj);        var divX = "#"+obj;        var divIDY=$(divX).prev().attr("id");        //alert("divIDY=="+divIDY);        var divY="#"+divIDY;                    $(divX).insertBefore($(divY));                        }                //右移    function moveRight(obj){        var divX = "#"+obj;                //alert("divX=="+obj);                var divIDY=$(divX).next().attr("id");                var divY="#"+divIDY;                //alert("divIDY=="+divIDY);                $(divX).insertAfter($(divY));            alert($(divX).insertAfter($(divY)));                alert("111");                }                //删除        function deleteDiv(obj){            var divX="#"+obj;            $(divX).remove();            }                function Oper(obj){            //alert(obj);                                       $('div').click(function()                    {                        //以下为重复执行的代码                         var st = null;                         //alert(st);                        st =$(this).attr("id");                                                alert("st="+st);                            if(obj=="0"){                                deleteDiv(st);                            }else if (obj=="1"){                                moveRight(st);                                }else if(obj=="2"){                                //alert("obj = "+obj);                                moveLeft(st);                                            }                        });                        }                </script></head><body >    <div>        <div id="div1" >            <ul>                   <li >aaaa1&nbsp;<a onclick="javascritp:Oper('1');">>>></a> &nbsp;<a onclick="javascritp:Oper('0');">delete</a></li>                <li >1</li>                <li >1</li>                <li >1</li>                <li >1</li>                <li >1</li>                       </ul>        </div>        <div id="div2">                    <ul >                <li ><a onclick="javascritp:Oper('2');" >左移</a> &nbsp;&nbsp;aaaa2&nbsp;<a onclick="javascritp:Oper('1');">右移</a>&nbsp;<a onclick="javascritp:Oper('0');">delete</a></li>                <li >2</li>                <li >2</li>                <li >2</li>                <li >2</li>                <li >2</li>                    </ul>                </div>                        <div id="div3" >            <ul>                 <li ><a onclick="javascritp:Oper('2');" >左移</a> &nbsp;&nbsp;aaaa3  &nbsp;<a onclick="javascritp:Oper('1');">右移</a>&nbsp;<a onclick="javascritp:Oper('0');">delete</a></li>                <li >3</li>                <li >3</li>                <li >3</li>                <li >3</li>                <li >3</li>                    </ul>        </div>                <div id="div4">            <ul>                <li ><a onclick="javascritp:Oper('2');" >左移</a>  &nbsp;aaaa4&nbsp;<a onclick="javascritp:Oper('1');">右移</a>&nbsp;<a onclick="javascritp:Oper('0');">delete</a></li>                <li >4</li>                <li >4</li>                <li >4</li>                <li >4</li>                <li >4</li>            </ul>        </div>                         <div id="div5">            <ul>                <li ><a onclick="javascritp:Oper('2');" >左移</a> &nbsp;aaaa5&nbsp;<a onclick="javascritp:Oper('1');">右移</a>&nbsp;<a onclick="javascritp:Oper('0');">delete</a></li>                <li >5</li>                <li >5</li>                <li >5</li>                <li >5</li>                <li >5</li>            </ul>        </div>         <div id="div6">            <ul>                <li ><a onclick="javascritp:Oper('2');" >左移</a> &nbsp;&nbsp;aaaa6&nbsp;<a onclick="javascritp:Oper('1');">右移</a>&nbsp;<a onclick="javascritp:Oper('0');">delete</a></li>                <li >6</li>                <li >6</li>                <li >6</li>                <li >6</li>                <li >6</li>            </ul>        </div>         <div id="div7">            <ul>                <li ><a onclick="javascritp:Oper('2');" >左移</a> &nbsp;&nbsp;aaaa7&nbsp;<a onclick="javascritp:Oper('1');">右移</a>&nbsp;<a onclick="javascritp:Oper('0');">delete</a></li>                <li >7</li>                <li >7</li>                <li >7</li>                <li >7</li>                <li >7</li>            </ul>        </div>    </div>        <em></em></body></html> 



[解决办法]
应为你没执行一次Oper,就重新执行$('div').click(function()绑定一次事件,这样就累加起来了,要取消绑定click后再绑定

JScript code
function Oper(obj){            //alert(obj);                                       $('div').unbind('click').click(function()/////////////////                    {                        //以下为重复执行的代码                         var st = null;                         //alert(st);                        st =$(this).attr("id");                                                alert("st="+st);                            if(obj=="0"){                                deleteDiv(st);                            }else if (obj=="1"){                                moveRight(st);                                }else if(obj=="2"){                                //alert("obj = "+obj);                                moveLeft(st);                                            }                        });                        } 

热点排行