ul动态添加click事件+js滑动条滚动

jquery 1.7版以前使用live动态绑定事件

 
    $( 
    "#testdiv ul li" 
    ).live( 
    "click" 
    , 
    function 
    (){ 
   
 
    }); 
   

jquery 1.7版以后使用on动态绑定事件

 
    $( 
    "#testdiv ul" 
    ).on( 
    "click" 
    , 
    "li" 
    ,  
    function 
    () { 
   
 
          
    //do something here 
   
 
     
    }); 
   

     示例： js滑动条滚动 
   

       
   
 
     <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>无标题文档</title>
<style>
    #rights    {
        right: 0;
        top: 100px;
        width: 100px;
        height: 300px;
        background-color: pink;
        position: fixed;
    }
    #rights a {
        float: left;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }
    
</style>

</head>

<body>
    <div id="rights"><a data-age="a1">a</a><a data-age="a2">b</a><a data-age="a3">c</a></div>
    页面内容1<br />
    页面内容2<br />
    页面内容3<br />
    页面内容4<br />
    页面内容5<br />
    页面内容<br />
    页面内容<br />
    <span id="a1" class="title" >天一广场</span><br />
    页面内容<br />
    页面内容<br />
    页面内容<br />

    页面内容<br />
    页面内容<br />
    页面内容<br />
    <span id="a2" class="title" >天一广场</span><br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    <span id="a3" class="title" >天一广场</span><br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
    页面内容<br />
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $("#rights").on("click","a", function() {
        var d=$(this).attr("data-age");
        console.log(d)
        $('html, body').animate({scrollTop: $('#'+d).offset().top}, 500)     
    });


</script>
</html> 
    
其他方法：
https://www.cnblogs.com/nifengs/p/5104763.html

ul动态添加click事件+js滑动条滚动

猜你喜欢