Jquery 条件适用于除 safari 以外的所有浏览器答案

【问题标题】：Jquery condition works in all browsers except safariJquery 条件适用于除 safari 以外的所有浏览器
【发布时间】：2014-05-03 03:58:17
【问题描述】：

在 iPhone 和 iPad 上的 Safari 中，我为条件语句设置的选择器不起作用，并导致每个 ajax 请求的内容重复。它在 android、chrome、firefox 和桌面版 safari 上运行良好。

$('li.micropost').each(function() {
  var nlform, nlid;
  nlid = $(this).data('url');
  if ($("li#post" + nlid + " div.nl-field").length === 0) {
    nlform = new NLForm(document.getElementById("post" + nlid));
  }
});

这是html

<li id="post<%= feed_item.id %>" class="micropost" data-url="<%= feed_item.id %>">...</li>

当 nlform 变量存在时，它会将以下 div 添加到其各自的列表项中

<div class="nl-field">...</div>

如果没有设置 nlform 变量，这就是 <li> 标记内的 html 的样子

<%= form_for((@micropost), :html => { :id => "nl-form", :class => "nl-form" }, :url => microposts_path, :authenticity_token => true) do |f| %>
    <!-- div will be added here if nlform variable is set -->
    <input type="text" value="" placeholder="type here" id="micropost_content1" name="micropost[content1]">
    <button id="btn<%= feed_item.id %>" class="nl-submit" type="submit" name="commit">Post</button>
<% end %>

我的 Safari 选择器无法识别我的 #nl-field 类不等于 0，因此它创建了一个重复的表单变量，导致每个 ajax 请求都有重复的 nl-field div。

我也尝试在 data-url 属性的开头添加一个字母，但这也没有帮助。

这是添加动态内容的javascripthttps://github.com/codrops/NaturalLanguageForm/blob/master/js/nlform.js

更新自从我在电脑上以来，这一直很难调试。如果有人可以帮助在移动 Safari 上进行调试，我可以链接到该应用程序的现场演示，我将不胜感激。我尝试将$('li.micropost').attr('class', 'micropos'); 添加到循环的末尾，这样当我在 li.micropost 上循环时，它不会重新访问 .micropos 类，但 safari 仍然会循环遍历每个列表项并复制内容。

我也尝试过遍历每个列表项并删除重复的 div

var seen = {};
$("li#post" + nlid + " .nl-field").each(function() {
   var txt = $(this).text();
   if (seen[txt])
      $(this).remove();
   else
      seen[txt] = true;
});

这个 hack 几乎可以通过将创建的副本数量限制为 2 个来实现。

我也尝试过像这样通过 Jquery 层次结构删除重复的 div

$("li#post" + nlid + " .prompt + div").remove()
除了迭代新添加的列表项，这些列表项都填充在一个 id 为 'infscr-loading' 的 div 之后

$( "#infscr-loading ~ li" )
我尝试根据 nl-field div 的存在添加一个新元素，并为其提供一个 id，然后我运行我的条件，但这也不起作用。

所有这些方法都可以在 chrome 上正常工作，以防止重复。 Idk 我做错了什么让 safari 表现得像这样。仅供参考，每次将新对象添加到页面时，我都会将此代码作为 jquery 无限滚动的回调运行。它是用 javacript 编写的，但对于我的应用程序，我将其转换为咖啡脚本。这是咖啡脚本的样子

$( "#infscr-loading ~ li" ).each ->
        nlid = $(this).data('url')
        nlform = new NLForm(document.getElementById "post" + nlid ) if $("li#post" + nlid + " .nl-field").length is 0
return

这里是用于创建动态 nl-field div https://gist.github.com/anonymous/8cc2f09b2045f8f0d6c8 的 javascript 的要点

【问题讨论】：

显然它并没有忽略条件语句，因为它正在执行其中的代码。实际发生的是它没有找到您期望的元素。找出该选择器的哪一部分失败了，您将更接近解决方案。
是的，你是对的，我是 jquery 新手。我正在运行条件的选择器是由于存在 nlform 变量而创建的。因此，如果它已经存在，那么我不想创建一个新的 nlform 变量。我不明白为什么选择器在除 Safari 之外的所有浏览器中都能正常工作。
@heartmo 你在移动 safari 中获取 data-url 值吗？
我在 Windows 电脑上，所以我还不完全知道如何调试移动 safari，但我假设 data-url 变量正在工作，因为每个列表项都是根据其数据动态填充的-url 变量，只是在 safari 上，每次我调用 ajax 时它都会复制这个动态内容。

标签： javascript jquery ruby-on-rails safari

【解决方案1】：

在对实时应用提交超过 50 次之后，我终于找到了罪魁祸首。在我的创建动态元素的 javascript 文件中

Array.prototype.slice.call( this.el.querySelectorAll( 'input#micropost_content1' ) ).forEach( function( el, i ) {
  self.fldOpen++;
  self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
} );

我不得不更改 'input#micropost_content1' 以使用类而不是 id，一切都开始按预期工作。

【讨论】：