Question

在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变量集，这就是html在<li>标签内的样子

<%= 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属性的开头添加一个字母，但这也没有帮助。

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

的JavaScript

更新这是因为我在电脑上调试非常困难。如果有人可以帮助我在移动游戏中调试这个，我可以链接到应用程序的现场演示，我真的很感激。我尝试将$('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;
});

这种破解几乎可以通过将创建的重复数量限制为2来实现。

我也试过通过Jquery层次结构删除重复的div，如此

$("li#post" + nlid + " .prompt + div").remove()
除了迭代新添加的列表项之外，这些列表项都是在id为＆＃39; infscr-loading＆＃39;的div之后填充的。像这样

$( "#infscr-loading ~ li" )
我尝试根据nl-field div的存在添加一个新元素，并给出一个id然后我运行我的条件并且也没有做到这一点。

所有这些方法都可以在chrome上正常工作以防止重复。我喜欢徒步旅行的行为是这样的。仅供参考我每次将新对象添加到页面时，都会将此代码作为jquery无限滚动的回调运行。它是用javacript编写的，但对于我的应用程序，我将它转换为coffeescript。这就是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 https://gist.github.com/anonymous/8cc2f09b2045f8f0d6c8的javascript的要点

Answer 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，所有内容都按预期开始工作。

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

1 个答案: