Firefox将不会呈现满载jQuery的AJAX内容CSS样式 [英] Firefox won't render CSS styles on content loaded with jQuery AJAX

问题描述

我有一个网站，让用户对书籍和文章评论，主要形式有查找相关的书或文章（来源）搜索输入。我使用jQuery动态地从基于输入的搜索条件的外部网站加载新​​的资金来源，然后又返回源使用AJAX的列表。我有两个问题：

I have a website that lets users comment on books and articles, and the main form has a search input for finding a relevant book or article (sources). I use jQuery to dynamically load new sources from an outside site based on the search terms entered, and then also return sources in a list using AJAX. I have two problems:

1. 右键现在，用户输入四个字符后，jQuery的运行与每一个新的preSS事件。什么是更好的方式来等待用户停止打字，然后只运行jQuery的事件呢？
2. 在Firefox中，列表不会样式尽管CSS的名单载于已与网页相关的主要CSS表。 （这只是正常的Chrome和Safari。）

1. Right now, after the user enters four characters, the jQuery runs with every new keypress event. What's a better way to wait for the user to stop typing, and then only run the jQuery event then?
2. In Firefox, the list is not styled though the CSS for the list is contained in the main CSS sheet already associated with the page. (This works just fine in Chrome and Safari.)

我用codeIgniter，但大多数的例子code应该是可访问的无论熟悉与CI。正如上面所说的，所有的CSS现在是在一个与此相关的页表。

I use CodeIgniter, but most of the example code should be accessible regardless of familiarity with CI. As said above, all CSS right now is in one sheet that is associated with this page.

下面是基本的HTML表单：

Here is the basic form html:

<?=form_open('/scrawls/add')?>
<h2>Add a Scrawl</h2>
<div id="scrawl-source-container">
    <p class="form-par">Search for a reference:</p>
    <input type="text" name="scrawl_source_search" id="scrawl-source-search">
    <div id="scrawl-source-suggestions">
        // this is where the list of suggestions is inserted
    </div>
</div>
<input type="hidden" name="scrawl_source_id" value=0 id="scrawl-source-id">
// redacted code here that deals with other fields 
<div id="selected-ref">
    You've selected: <span id="selected-ref-name"></span>
</div>
// redacted code here that deals with other fields
<?=form_submit('scrawl_submit','Post')?>
<?=form_close()?>

下面是JavaScript（不是我strongsuit）：

Here is the javascript (not my strongsuit):

$(document).ready(function() {

$("input#scrawl-source-search").keypress(function() {
    var length = $(this).val().length;
    // check to see if there are more than four characters in the input field
    if (length > 4) {
        // need to make some sort of loading div here
        // make Ajax request to find matching sources
        $.post("http://mysite.com/refs/refMatch",{ term:$("input#scrawl-source-search").val()}, function(data) {
            if (data=="No output") {
                $("div#scrawl-source-suggestions").show();
                $("div#scrawl-source-suggestions").html("No matches.");
            } else {
                $("div#scrawl-source-suggestions").html(data).hide();
                $("div#scrawl-source-suggestions").slideDown();
            }
          });
    }
});
});

其通过AJAX访问的'refMatch页检查的外部站点，以查看是否有任何新的补充了需要对数据库，然后从分贝输出匹配这里是输出文件：

<?php
if(isset($refs))
{
echo '<ul class="autocomplete-list">';
foreach($refs as $r)
{
    echo '<li class="autocomplete-entry">';
    echo '<span class="source-id" style="display:none">'.$r->ref_id.'</span><span class="source-title">'.$r->ref_title.'</span>';
    if($r->ref_author != '') {
        echo ' by <span class="source-author">'.$r->ref_author.'</span>';
    }
    echo '</li>';
}
echo '</ul>';
} else {
    echo "No output";
}

那么，重复我的问题，为什么不FF造型AJAX的输出？什么是一个更好的方式来触发jQuery的AJAX调用？

So, to repeat my questions, why is FF not styling the AJAX output? And what's a better way to trigger the jQuery AJAX call?

推荐答案

我还不能肯定是什么问题，但有关于你的帖子一些奇怪的事情。鉴于这部作品在Chrome和Safari浏览器，它似乎是你的标记/风格是正确的，但。你能提供的网址到您的网站？

I'm not positive what the problem is, but there's a few curious things about your post. Given that this works in Chrome and Safari, it would seem that your markup/styles are correct though. Can you provide the URL to your site?

首先，你添加CSS类通过Javascript的元素呢？如果是这样，那么你添加的样式只会影响那些都是DOM在那个时间点的一部分元素，所以你可能会遇到一个竞争条件，实际上发生在Chrome和Safari的工作，而不是Firefox浏览器。

First, are you adding CSS classes to your elements via Javascript? If so, then the styles you add will only affect those elements which are part of the DOM at that point in time, so you might be experiencing a race condition, that actually happens to work in Chrome and Safari, but not Firefox.

二，你提到你使用jQuery来加载从外部数据源（外部网站我presume）。这违反了同源策略，我希望它可以在所有浏览器失败。这可能是有些问题的原因。

Second, you mention that you're using jQuery to load data from an outside source (an external web site I presume). This violates the Same Origin Policy and I would expect this to fail in all browsers. This might be the cause of some problems.

我强烈建议使用萤火虫来解决此。你可以用它来检查HTML 并真正看到发生了什么事情。

I strongly suggest using Firebug to troubleshoot this. You can use it to inspect HTML and really see what's going on.

这篇关于Firefox将不会呈现满载jQuery的AJAX内容CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！