Jquery条件适用于除safari之外的所有浏览器 [英] Jquery condition works in all browsers except safari

问题描述

在iPhone和iPad上的Safari中，我为条件语句准备的选择器不起作用，导致每个ajax请求都有重复的内容。它适用于android，chrome，firefox，即safari的桌面版。

In Safari on iPhone and iPad the selector I have in place for the conditional statement isn't working and results in duplicate content with each ajax request. It works fine on android, chrome, firefox, ie and the desktop version of 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添加到其各自的列表项

When the nlform variable is present it adds the following div to its respective list item

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

如果没有nlform变量设置，这就是html在里面的样子< li> tag

Without the nlform variable set this is what the html looks like inside of the <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。

My selector for Safari fails to recognize that my #nl-field class isn't equal to 0 so it creates a duplicate form variable resulting in duplicate nl-field divs with each ajax request.

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

I've also tried adding a letter to the beginning of the data-url attribute but that didn't help either.

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

This is the javascript that adds the dynamic content https://github.com/codrops/NaturalLanguageForm/blob/master/js/nlform.js

更新
由于我在电脑上，因此调试非常困难。如果有人可以帮助我在移动游戏中调试这个，我可以链接到应用程序的现场演示，我真的很感激。
我尝试添加 $（'li.micropost'）。attr（'class'，'micropos'）; 到循环结束时这样当我在li.micropost上循环它不会重新访问.micropos类，但不知何故safari仍会循环遍历每个列表项并复制内容。

Update This has been very difficult to debug since I'm on a pc. If anyone can help with debugging this on mobile safari I can link to a live demo of the app, I would really appreciate it. I tried adding $('li.micropost').attr('class', 'micropos'); to the end of the loop so that when I loop on li.micropost it won't revisit the .micropos class but somehow safari still loops over each list item and duplicates content.

我也试过迭代每个列表项和删除重复的div

I've also tried iterating over each list item and removing duplicate divs

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

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

This hack almost works by limiting the amount of created duplicates to 2.

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

• I've also tried removing the duplicate div thru the Jquery hierarchy like so

$（li＃post+ nlid +。offerdiv）。remove（）

并且只迭代新添加的列表项，这些列表项全部填充在ID为'infscr-loading'的div之后，如此

As well as only iterating over newly added list items which are all populated after a div with an id of 'infscr-loading' like this

$ （＃infscr-loading~li）

我尝试根据nl的存在附加一个新元素-field div并给出一个id然后我运行我的条件并且也没有做到这一点。

I've tried appending a new element based on the presence of the nl-field div and giving that an id which I then run my condition against and that doesn't do the trick either.

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

All of these approaches work fine on chrome to prevent duplication. Idk what I'm doing wrong for safari to behave like this. FYI i'm running this code as a callback on jquery infinite scroll each time new objects are added to the page. It's written in javacript but for my app I'm converting it to coffeescript. Here's what the coffeescript looks like

$( "#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

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

Here is a gist of the javascript used to create the dynamic nl-field div https://gist.github.com/anonymous/8cc2f09b2045f8f0d6c8

推荐答案

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

After over 50 commits to the live app I finally found the culprit. In my javascript file that creates the dynamic elements I had

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，一切都按预期开始工作。

I had to change 'input#micropost_content1' to use a class instead of an id and everything began working as intended.

这篇关于Jquery条件适用于除safari之外的所有浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！