Jquery 条件适用于除 safari 之外的所有浏览器

在 iPhone 和 iPad 上的 Safari 中，我为条件语句设置的选择器不起作用，并且会导致每个 ajax 请求出现重复的内容。它在 android、chrome、firefox、ie 和桌面版 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 变量，这就是 html 内部的样子<li> tag

<%= 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 https://github.com/codrops/NaturalLanguageForm/blob/master/js/nlform.js

Update因为我在电脑上，所以调试起来非常困难。如果有人可以帮助在移动 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 上都能很好地工作，以防止重复。我不知道我做错了什么，让 Safari 表现得像这样。仅供参考，每次将新对象添加到页面时，我都会运行此代码作为 jquery 无限滚动的回调。它是用 javacript 编写的，但对于我的应用程序，我将其转换为 Coffeescript。 这是咖啡脚本的样子

$( "#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 的 javascript 要点https://gist.github.com/anonymous/8cc2f09b2045f8f0d6c8 https://gist.github.com/anonymous/8cc2f09b2045f8f0d6c8

在对实时应用程序进行了 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，一切都开始按预期工作。