2

我无法让带有 jquery 和 ajax 的页面正常工作。我试图使这个例子尽可能简单。jquery 在单个页面上时可以工作，但在通话后我无法让它工作。

2 页，第一页：

<!DOCTYPE html>
<html>
<head>
    <script src="../js/jquery-1.8.2.min.js"></script>
    <style type='text/css'>
        #one {
            width: 200px;
            height: 200px;
            background: red;
        }
        #two{
            width: 200px;
            height: 200px;
            background: blue;
        }

        .show {
            display: none;
            background: yellow;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#div1").load("definition.jsp");
            });
        });
    </script>
    <script type="text/javascript">

        $('#wrapper').on('mouseenter', '.touch', function() {
            $(this).next('.show').fadeIn(800);
        }).on('mouseleave', '.touch', function() {
            $(this).next('.show').delay(800).fadeOut(800);
        });
    </script>
</head>
<body>

    <div id="div1"><h2>jQuery AJAX Test</h2></div>
    <button>Get External Content</button>

</body>

第二页：

<div id="wrapper">
<div id="parent_one">
    <div class="touch" id="one">Enter</div>
    <div class="show">Works</div>
</div>
<div id="parent_two">
    <div class="touch" id="two">Enter</div>
    <div class="show">Second Works</div>
</div>

有任何想法吗？请帮忙！

4

5 回答 5

7

您无法将事件绑定到，#wrapper因为页面加载时它不存在。相反，将其绑定到document，并带有查找#wrapper .touch. 只有将该元素添加到 DOM 后才会触发该事件。

将您的第二个<script>标签中的内容更改为：

$(document).on('mouseenter', '#wrapper .touch', function() {
    $(this).next('.show').fadeIn(800);
}).on('mouseleave', '#wrapper .touch', function() {
    $(this).next('.show').delay(800).fadeOut(800);
});

阅读 jQuery API 对.on().

注意：如果您将事件绑定到#div1，它将触发.touch您放入其中的任何和所有元素，而不仅仅是里面的元素#wrapper。

于 2013-09-13T18:51:39.913 回答
0

#wrapper是动态加载的内容，所以需要将事件委托给页面加载时存在的元素，比如#div1

$('#div1').on('mouseenter', '.touch', function() {
    $(this).next('.show').fadeIn(800);
}).on('mouseleave', '.touch', function() {
    $(this).next('.show').delay(800).fadeOut(800);
});
于 2013-09-13T18:51:23.647 回答
0

#wrapper执行附加事件处理程序的代码时还不存在。所以$('#wrapper')将是空的，.on(...)不会做任何事情。尝试在 AJAX 调用之后附加事件：

$("button").click(function() {
    $("#div1").load("definition.jsp",function(){
        $('#wrapper .touch').on('mouseenter', function() {
            $(this).next('.show').fadeIn(800);
        }).on('mouseleave', function() {
            $(this).next('.show').delay(800).fadeOut(800);
        });
    });
});

（即去掉你的第二个<script>标签，把它放在你的里面$(document).ready(function(){ ... });）

这样，事件处理程序仅在元素实际存在时才附加。

供参考：http ://api.jquery.com/load/

于 2013-09-13T18:55:03.113 回答
0

我们是非常sonsos。

我们需要再次阅读文档 LOL

$( "#result" ).load( "ajax/test.html #container" );

出色地。可能只需要加载已加载的 html 的一小部分，而不是整个文档。当在 DIV（或任何 html 元素）中加载完整文档时，它可能只执行一次调用 jquery 函数，例如：

$("img.lazy").lazyload();

但是下一次，在使用 element.html("") 卸载元素并重新加载目标 html 后，函数lazyload() 不存在。

解决方案（就我而言）。

 $( "#slides_holder" ).load("slides.html #sm-slider", function( response, status, xhr ) {
                                             if ( status == "error" ) {
                                             var msg = "Sorry but there was an error: ";
                                             $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
                                             }else{
                                             $( document ).ready(function() {// IS REALLY NEEDED IN HERE A ready CALL? DUNNO BUT WORKS!
                                                                 $("img.lazy").lazyload();
                                                                 });
                                             }});

这将加载整个 html，但只有 id 为 '#sm-slider' 的元素将设置在 '#slides_holder' 元素上。

于 2014-05-20T19:22:44.387 回答
0 
jQuery(".custom-filter-options .sbHolder ul li a").each(function () {
    var myStr = jQuery(this).text();
    var myArr = myStr.split(" (");
     url = 'your url'; // New Code
            data = myArr[0];
                try {
                    jQuery.ajax({
                        url : url,
                        context: this,
                        type : 'post',
                        data : data,
                        success : function(data) {
            if(data){
                  jQuery(this).html(data);
            }else{
                  jQuery(this).html(myArr[0]);
            }
                        }
                    });
                } catch (e) {
                } 


});
于 2014-08-27T12:09:41.353 回答