Question

我有这个单页面应用程序，而不是页面，一次加载一个部分。这个应用程序的基础是你输入一个查询然后去一个结果页面，并在结果的另一个表格 - 与第一个表格相同，但不是去一个新的视图（进入同一页面的不同部分））结果就在它下面。每当加载新视图时，另一个视图都会被隐藏。（例如：主视图有搜索表单。搜索，提交，隐藏主页视图，然后查看结果视图）

其中一些观点会有这种形式，有些则没有，所以如果不这样，我会隐藏表格：

视图包含从远程服务器发送的html数据。其中一些视图在页面上方没有表格，有些则有。

当视图没有表单时，我使用以下函数隐藏表单：

removeContent = function(){
    $('#analyze-results-form').hide();
    $('#pick-content').html(''); 
}

其中包含了这个问题：

    getSomethingPicks = function(phoneId){
        var pickHolder = $('#PickHolder'),
        pickContent = $('#pick-content');
        $.ajax({
            type: "POST", url: 'http://www.something.com/something.php', 
            data: "something"+phoneId+"&something",
            beforeSend: function(){
                removeContent();
            },
            complete: function(data){  
                pickContent.html(data.responseText);    
            }   
        });
    }

在单击事件后转到#somePage时会运行此命令。

所以我们假设我们转到主视图＆gt;菜单视图＆gt; SsomethingPage视图＆gt;主视图＆gt;结果视图。

现在因为我在contentPage视图中隐藏了内容，所以结果视图中所需的表单不会显示。这是我用于结果视图的代码，以及我修复它的尝试。

getPickerData = function() {
    var tickerForm = $('#analyze-form'),
        tickerResultsFormClone = $('#analyze-results-form').clone();
        pickHolder = $('#PickHolder'), // The view where the results and second form resides
        pickContent = $('#pick-content'), // Where the results is loaded
        tickerHomeInput = $('#home #ticker'); // Value of the first ticker
    $.ajax({
        type: "POST", 
        url: 'http://www.1dayreturn.com/getPicksdev.php', 
        data: "action=GetEverything&stock="+tickerHomeInput.val()+"&application=android",
        beforeSend: function(){
            if (pickContent.length == 0) {
                pickHolder.html('');
                tickerResultsFormClone.prependTo(pickHolder);
                $('<div id="pick-content"></div>').appendTo(pickHolder);
                pickContent = $('#pick-content');
                console.log(tickerResultsFormClone);
            }
        },
        complete: function(data){
            pickContent.html(data.responseText);
        }  
    });
    /*
        Results form
     */
    var tickerResultsInput = $('#PickHolder #ticker');
    $('#results-submit-ticker').on('touchstart click', function(e){
        $('#analyze-results-form').show();
        console.log('clicked?');
        $.ajax({
            type: "POST", 
            url: 'http://www.1dayreturn.com/getPicksdev.php', 
            data: "action=GetEverything&stock="+tickerResultsInput.val()+"&application=android",
            beforeSend: function() {
                pickContent.slideUp('400').html('<h2 class="searchloading">Searching for stock data...</h2>');
            },
            complete: function(data){
                $('.searchloading').hide('300');
                pickContent
                    .html(data.responseText)
                    .slideDown('400');
            }  
        });
    });
}

因为有时候必须清空pickHolder，因为有些内容，我正在替换并重新插入表单。这有效。这里的问题是第二部分。

HTML：

<div id="PickHolder" class="view container">
    <form id="analyze-results-form" action="" class="analyze-form">
        <div class="input-container">
            <input id="ticker" class="input-stock" type="text" placeholder="Add Ticker">
            <em class="subtext">(GOOG, AAPL, YHOO, etc)</em>
        </div><!-- /.input-container -->
        <button id="results-submit-ticker" class="action action-data btn no-view" data-ref="#PickHolder">Analyze</button>
    </form>
    <div id="pick-content"></div>
</div>

但表格未能显示，我不知道为什么。问题是，我怎样才能让我的表格显示出来？

Answer 1

在getPickerData的第一行，您有对表单的查询：

tickerForm = $('#analyze-form')

表单的ID为analyze-results-form，类为analyze-form。在您的选择器中，您使用的是#，这是一个ID选择器，但您已使用表单的类而不是其ID。

当您使用jQuery并在集合上调用某个方法（例如.show()），并且您没有看到更改生效时，第一个故障排除步骤应该是将集合记录到控制台看它是否包含你认为它的元素。如果没有，则对选择器进行故障排除。

修改：等待......在我查看您的代码时还有更多...

您甚至从未使用我向您指出的第一行代码中的tickerForm变量。

另外，你在beforeSend内的第一个ajax调用中写的getPickerData对我来说没什么意义......我不明白为什么你似乎在尝试重建#PickHolder的内容只是因为#pick-content为空。 无论如何，您在此之前克隆表单，然后删除原始表单并将克隆放置到位。但是，克隆可能是从原始格式创建的，而它是隐藏的。因此，新克隆的将具有display: none;的样式。您需要在其上调用.show()。

Answer 2

jQuery（'＃selector'）只选择一个元素。你有两个，在tickerResultsFormClone.prependTo（pickHolder）之后;

将您的脚本更改为：

removeContent = function(){
    $('.analyze-form').hide();
    $('#pick-content').html(''); 
}

和

$('#results-submit-ticker').on('touchstart click', function(e){
   $('.analyze-form').show();
...

查看更多https://api.jquery.com/id-selector/

表格在隐藏后不显示

2 个答案: