jquery的html()方法

樱木花道VS康 发布于 2018/07/23 12:21
阅读 264
收藏 0

大家好,我想实现左侧菜单右侧切换界面的功能,springmvc框架,前端ajax请求,springmvc不返回json的话返回的是html界面吧,前端使用jquery("#div").html(data),动态生成html,出现一个问题,第一次初始化没问题,再次点击的话,初始化界面的js不执行了?什么情况,还有load跟html方法那个好使?

大致代码:

li点击事件:            
$("#center>.leftTab>ul>li").click(function () {
                var url = $(this).attr("href");

                $(".tabCon").load(url);

            });

li:

<ul>
    <li class="vary" href="/test/hello1"><i class="icon-grzl cur-color"></i>个人资料</li>
    <li href="/test/hello2"><i class="icon-blgl"></i>信息管理</li>
</ul>

要加载的html的div

<div class="tabCon">

子界面:

<head>
    <meta charset="UTF-8">
    <!--jquery-->
    <script type="text/javascript" th:src="@{/js/base/jquery-3.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap/js/bootstrap-select.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap/js/bootstrapValidator.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap/js/defaults-zh_CN.js}"></script>

    <!--bootstrap-->
    <link rel="stylesheet" th:href="@{/js/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/js/bootstrap/css/bootstrapValidator.min.css}">
    <link rel="stylesheet" th:href="@{/js/bootstrap/css/bootstrap-select.css}">

    <!--cropper-->
    <script type="text/javascript" th:src="@{/js/cropper/cropbox.js}"></script>
    <script type="text/javascript" th:src="@{/js/userdata/init-ropbox.js}"></script>
    <link rel="stylesheet" th:href="@{/css/cropper/cropbox.css}">

    <!--laydate-->
    <script type="text/javascript" th:src="@{/js/laydate/laydate.js}"></script>
<script th:inline="javascript">

直接的js

</script>

有引入的js有直接写的js,

我想法可能太简单,就是访问springmvc后台返回界面加载到<div class="tabCon">中,实现点击左侧菜单,切换右侧界面的效果,节省代码量,,,也避过了iframe

现在的问题是,第一次点击li比如个人资料是可以加载子界面的,再次点击,js不起作用了,界面控件没有初始化出来???

 

 

加载中
0
风吹屁屁凉
风吹屁屁凉

第一次初始化是什么意思,是$(function(){ 初始化代码 })吗,如果是这样的只生效一次,要想再次点击执行,需要绑定单击事件,load和html用html就行

樱木花道VS康
樱木花道VS康
回复 @风吹屁屁凉 : 不行啊,都一样的,就是给li添加点击事件,改成您这样也不行,,,
风吹屁屁凉
风吹屁屁凉
回复 @樱木花道VS康 : 你这选择器好麻烦啊,你给ul设置一个id,然后把$("#center>.leftTab>ul>li").click改成$("#ul的id").children().click,绑定放到$(function(){ 事件绑定放到这里 })
樱木花道VS康
樱木花道VS康
您好,我贴出来了,有劳了,我jquery有点弱,,,
风吹屁屁凉
风吹屁屁凉
回复 @樱木花道VS康 : html或者JS代码发一下吧
樱木花道VS康
樱木花道VS康
您好,我左侧菜单时li,添加的点击事件,第一次点击可以加载,再点击就不行了
0
风吹屁屁凉
风吹屁屁凉

我这边是可以的,点击之后都会弹出对应的alert

樱木花道VS康
樱木花道VS康
回复 @风吹屁屁凉 : 哦,我就是想避开iframe的,网上的例子都是请求的静态html,实际开发中都是走的后台吧(url),3q
风吹屁屁凉
风吹屁屁凉
回复 @樱木花道VS康 : 额,我以为是单击事件出了问题,你这样是肯定不会执行的,load和html只是追加元素,JS会替换掉,也就会失效,想执行的话你只能想别的办法了,比如说用事件委托的方式,但是你地址是动态的,不适用委托,可以考虑用iframe
樱木花道VS康
樱木花道VS康
额,点击事件是没有问题的,我的url是一个springmvc的controlller请求地址,controller返回界面后使用load将界面加载到div中,在这里出现问题,返回的界面中的js不生效,好比如:li点击后引入html(静态的)到本界面div中,html有一些js代码,这些js不生效,还是很感谢您这么耐心
返回顶部
顶部