0

我有一个包含 jQuery 脚本和 AJAX 请求的 html 页面。在我的页面上，我有一些带有“loading_span”类的跨度元素。单击一个 href 时，将执行一个 ajax 进程。该过程还使用类生成一些跨度：'loading_span'。问题是我的 jQuery 脚本不会通过 ajax 请求触发新添加的跨度元素。

问题是：为什么我的脚本没有看到添加了“loading_span”类的新元素？

在下面我将粘贴我的代码：

/* file js/javascript.js */
$(document).ready(function() {

    $.ajaxSetup ({
        cache: false
    });

    $('#show-more').click( function() {
    $.ajax({
        url: $(this).attr('href'),
        success: function(msg){
            $('#all_span').append().html(msg);
        },
        dataType: "Html"
    });
    return false;
});


    $('.loading_span').each(function(index, span){
        console.log($(this).attr('id'));
    });
});

index.php 文件：

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="js/script.js" ></script>   
        <style type="text/css">
            .loading_span {
                display: list-item;
            }
        </style>
    </head>
    <body>
        <div id="all_span">
        <?php

        for($i=0;$i<5;$i++)
            echo "<span class='loading_span' id='id$i'>span$i</span>";
        ?>
            <a href="ajax.php" id="show-more">show_more</a>
        </div>
    </body>

以及 ajax.pho 文件内容

for ($i = 0; $i < 5; $i++)
    echo "<span class='loading_span' id='ajax$i'>ajax$i</span>";
4

3 回答 3

1

您可以使用 after element 在 loading_span 之后添加元素。

请参阅下面的 url 仅 Javascript 部分。 http://jsfiddle.net/vkTHK/1/

我仍然无法弄清楚您要达到的目标。如果它不能满足您的需要，请详细说明或提供 JS fiddle URL，以便我提供帮助。

于 2012-07-15T14:34:09.787 回答
1

你应该使用

$('#all_span').append(msg);

代替

$('#all_span').append().html(msg);

并将您的成功回调更改为

success: function(msg){
        $('#all_span').append(msg);
        $('.loading_span').each(function(index, span){
            console.log($(this).attr('id'));
        });
},
于 2012-07-15T17:49:16.787 回答
0

您$('.loading_span').each...在 AJAX 调用完成之前执行，这就是它正在做它正在做的事情的原因。您可以将该代码移动到successAJAX 调用的事件中，以便在将新元素添加到 DOM 后应用它。

于 2012-07-15T17:28:01.363 回答