Question

我在使用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>

有什么想法吗？求救！

Answer 1

您无法将事件绑定到#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);
});

Read what the jQuery API has to say about .on().

注意：如果您将事件绑定到#div1，它将触发您放入其中的所有.touch元素，而不仅仅是{{1}内的元素}}

Answer 2

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

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

Answer 3

执行附加事件处理程序的代码时，

#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/

Answer 4

我们是非常超级的人。

我们需要再次阅读文档LOL

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

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

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

但下次卸载元素-using element.html（＆＃34;＆＃34;） - 并重新加载目标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＆＃39; #sm-slider＆＃39;的元素。将设置在＆＃39;＃slides_holder＆＃39;元件。

Answer 5

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) {
                } 


});

Jquery没有处理ajax加载的内容div

5 个答案: