jquery手风琴不使用从AJAX收到的内容

Question

我有一个问题,手风琴在通过AJAX从另一个页面接收内容时无法正常工作.页面是这一页:http://jbm.utad.pt/testes/tempo/index.php

一旦页面加载,它就会向processtempo.php发送一个默认的城市名称,使用AJAX将结果发送回div:

在processtempo.php中,我有一个手风琴的HTML,但它的jQuery在index.php中.这个手风琴是不行的,因为HTML必须在主页面中,还是我搞砸了jQuery？

你可以在源代码中查看手风琴jQuery脚本......我还没有把它放在特定的js文件中.

非常感谢所有可能的帮助,并对这个含糊的问题感到抱歉

干杯

Answer 1

在通过ajax例程将元素加载到页面之前,您正在为元素分配click()事件.tempo-head并对元素执行大量其他操作.

您需要获取最新版本的JQuery才能使用以下内容.我注意到你现在有一个过时的版本(1.4.2)

尝试改变这个:

$('.tempo-head').click(function () {

至

$('#sidebar').on('click', '.tempo-head').click(function () {

要么

将所有的手风琴例程移到successajax调用中的回调内部,如下所示.

$(document).ready(function(){

    var cidade2='penafiel';
    var dataString = 'cidade='+ cidade2;
    $.ajax({ type: "POST", url: "processtempo.php", data: dataString, cache: false,
        success: function(html){
            $("#exibe_tempo").html(html);
        }
    });

    $(".cidade").change(function(){
        var cidade=$(this).val();
        var dataString = 'cidade='+ cidade;

        $.ajax({ type: "POST", url: "processtempo.php", data: dataString, cache: false,
            success: function(html){
                $("#exibe_tempo").html(html);

                //Add Inactive Class To All Accordion Headers
                $('.tempo-head').toggleClass('head-off');

                //Set The Accordion Content Width
                var contentwidth = $('.tempo-head').width();
                $('.tempo-cont').css({'width' : contentwidth });

                //Open The First Accordion Section When Page Loads
                //$('.tempo-head').first().toggleClass('head-on').toggleClass('head-off');
                //$('.tempo-cont').first().slideDown().toggleClass('tempo-cont');

                // The Accordion Effect
                $('.tempo-head').click(function () {        
                        if($(this).is('.head-off')) {
                            $('.head-on').toggleClass('head-on').toggleClass('head-off').next().slideToggle().toggleClass('tempo-cont');
                            $(this).toggleClass('head-on').toggleClass('head-off');
                            $(this).next().slideToggle().toggleClass('tempo-cont');
                        }

                        else {
                                $(this).toggleClass('head-on').toggleClass('head-off');
                                $(this).next().slideToggle().toggleClass('tempo-cont');
                        }

                });


            }
        });
    });


    return false;

}); // END DOC READY