jquery - Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

Question

我有一个网站，可让用户对书籍和文章发表评论，主表单具有用于查找相关书籍或文章(来源)的搜索输入。我使用 jQuery 根据输入的搜索词从外部站点动态加载新源，然后还使用 AJAX 返回列表中的源。我有两个问题:

1. 现在，在用户输入四个字符后，jQuery 会随着每个新的按键事件运行。等待用户停止输入然后只运行 jQuery 事件的更好方法是什么？
2. 在 Firefox 中，尽管列表的 CSS 包含在已与页面关联的主 CSS 表中，但列表并未设置样式。 (这在 Chrome 和 Safari 中效果很好。)

我使用 CodeIgniter，但无论是否熟悉 CI，大多数示例代码都应该可以访问。如上所述，现在所有 CSS 都位于与此页面关联的一张表中。

这是基本的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(不是我的强项):

$(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 调用的更好方法是什么？

Answer 1

我不确定问题是什么，但你的帖子有一些奇怪的地方。鉴于这在 Chrome 和 Safari 中有效，看来您的标记/样式是正确的。您能提供您网站的 URL 吗？

首先，您是否通过 Javascript 将 CSS 类添加到元素中？如果是这样，那么您添加的样式只会影响当时属于 DOM 的那些元素，因此您可能会遇到竞争条件，这实际上恰好适用于 Chrome 和 Safari，但不适用于 Firefox。

其次，您提到您正在使用 jQuery 从外部源(我认为是外部网站)加载数据。这违反了Same Origin Policy我预计这在所有浏览器中都会失败。这可能是导致某些问题的原因。

我强烈建议使用Firebug来解决这个问题。您可以使用它inspect HTML并真正了解发生了什么。