javascript - 无法在 superslides jquery 插件上加载 ajax 内容

Question

我是 jquery 的新手，实际上我正在使用 Superslides 插件 Superslides

用于背景并使用前面的 div 使用 ajax 加载其他页面。现在的问题是，当我加载页面时，例如。使用 jquery ajax 方法的客户端页面加载正常，但主页导航停止工作。我的意思是让用户移动到下一张幻灯片的列表项目不起作用。也许客户端页面中的列表项与主页列表项冲突，因为我一直在使用 Li 将主页从后一张幻灯片导航到下一张幻灯片。这是我的代码

这就是我使用 Li 导航设置点击绑定(bind)的方式

幻灯片的jquery代码

        $(document).ready(function () {
        $('.mainMenuListItem').click(function () {
            var currentThumbSel = $(this).attr("data-id");
            $('.slides-pagination a:nth-child(' + currentThumbSel + ')').click();


        });
    });
</script>

html导航代码是

 <div id="mainMenuStrip">
    <ul id="mainMenuList">
        <li class="mainMenuListItem" id="homeMenuListItem" data-id="1">HOME |</li>
        <li class="mainMenuListItem" data-id="2">ABOUT |</li>
        <li class="mainMenuListItem" id="clientsMenuListItem" data-id="3">CLIENTS |</li>
        <li class="mainMenuListItem" data-id="4">HOW WE WORK | </li>
        <li class="mainMenuListItem" data-id="5">OUR PROJECTS |</li>
        <li class="mainMenuListItem" data-id="6">DOWNLOAD TOOLS |</li>
        <li class="mainMenuListItem" data-id="7">CONTACT</li>

    </ul>
</div>

现在客户端页面代码是

<style>
    #clientsList {
        list-style-type: none;
        width: 810px;
        height: 460px;

        margin: 0px;
        padding: 0px;
    }

        #clientsList li {
            float: left;
            height: 150px;
            margin-left: 4px;
            margin-top: 7px;
            width: 265px;
            background-color: black;
            cursor: pointer;
        }

    body {
        margin: 0px;
    }

    .overlayClient {
        position: absolute;
        height: 150px;
        width: 265px;
        z-index: 2;
        background-color: red;
        opacity: 0.7;
        display: none;
    }

    .informationZoom {
        color: white;
        font-family: verdana;
        font-size: 51px;
        margin-left: 115px;
        float: left;
        font-weight: bold;
        margin-top: 38px;
    }
</style>

<script>
    $(document).ready(function() {

        //$('#clientsList>li').mouseenter(function() {
        //    $(this).find(".overlayClient").fadeIn(500);




        //});

    });

    $(document).ready(function () {

        //$('#clientsList>li').mouseleave(function () {
        //    $(this).find(".overlayClient").fadeOut(500);




        //});

    });

</script>

<ul id="clientsList">
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>

这是 Ajax Load 方法

<script>
    $(document).ready(function () {

        $('#clientsMenuListItem').click(function () {

            $('#clientsAjaxContainer').load('clients.html'); 
        });
    });


</script>

可以看到客户页面也有li，可能和li有些冲突？请帮我解决这个问题。谢谢。

Answer 1

您的 Jquery 似乎发生冲突，请尝试在主站点上加载 jquery 并且不要在子页面中使用它。谢谢