Question

我正在创建一个应用程序，其中页面内容被更改并通过AJAX（和hashchange jquery脚本）动态替换。由于某些原因，在动态更改的AJAX内容中，选择表单选项未显示。示例：

http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/#enter.php

但是，如果我运行页面，而不通过AJAX加载/更改内容（删除URL中的＃标记），则select表单元素将按原样运行。

http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/enter.php

这是杀了我!!!请帮忙。以前从来没有碰到这样的问题。甚至不知道从哪里开始。但这是动态脚本，我假设是问题。但是找不到与选择框的任何冲突。是什么给了什么？

$(function() {

var newHash      = "",
    $mainContent = $("#appContent"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el; 

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    }); 
    $("#buttonWrap").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });  

$(window).bind('hashchange', function(){    
    newHash = window.location.hash.substring(1);        
    if (newHash) {
        $mainContent
            .find("#guts")
            .slideToggle(500, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.slideToggle(500, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");

                    //RE-FIRE OTHER SCRIPTS ON AJAX CONTENT LOAD

                    //Phone Field Format
                    $(function() { 
                        $("#phone").mask("(999) 999-9999",{placeholder:" "});
                    });

                });
            });
    };                         
});

$(window).trigger('hashchange');

}）;

Answer 1

来自服务器的响应看起来完全正确，但是在插入DOM后，你的select元素都被破坏了。我的猜测是load（）+ parse-selector是罪魁祸首。尝试使用$.ajax，如下所示：

$(function() {

var newHash      = "",
    $mainContent = $("#appContent"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    $("#buttonWrap").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

$(window).bind('hashchange', function(){
    newHash = window.location.hash.substring(1);
    if (newHash) {
        $mainContent
            .find("#guts")
            .slideToggle(500, function() {
                $mainContent.hide();
                $.ajax({
                    url: newHash,
                    dataType: 'html',
                    success: function(data) {
                        $mainContent.html($(data).find('#appContent').html());
                        $mainContent.slideToggle(500, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");

                        //RE-FIRE OTHER SCRIPTS ON AJAX CONTENT LOAD

                        //Phone Field Format
                        $(function() {
                            $("#phone").mask("(999) 999-9999",{placeholder:" "});
                       });
                    }
                });
            });
    }
});

$(window).trigger('hashchange');

});

编辑：完整的代码回答

选择未显示的选项

1 个答案: