我遇到了一个问题,即动态创建的链接在我测试过的所有设备(在所有桌面浏览器、iPhone、iPad 和三星 Galaxy 平板电脑 Chrome 浏览器)上都可以正常工作,但在 Android 上单击时无法正常工作手机(我在三款运行 Chrome 的 Android 手机上进行了测试,抱歉没有 Chrome 版本,但一部手机真的很新,其他手机最多使用 1-2 年)。
我正在动态创建链接以在循环中将项目添加到购物车(在更大的动态创建的实体内)。
有问题的链接基本上是这样构造的:
var itemHTML = "";
...
itemHtml += '<a href="'+gAddLink+'" class="add2Cartlink">...</a><span>\n'
...
其中 gAddLink 只是一个标准 URL。然后,我使用 document.write() 将该 itemHTML(除了其他 HTML 之外)动态插入到页面中。
由于这是在页面加载时动态创建的(出于此问题范围之外的原因,但这是必要的),我知道我必须设置一个点击处理程序:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
其中 '.elementToInsertTo' 是非动态创建的父元素,并且在页面加载时出现在页面上。这些父母有多个,因此我不能使用元素 ID。不要认为这有什么不同。
同样,我可以确认这个点击监听器中的函数调用除了 Android 手机(据我所知)之外的任何地方都有效。知道为什么会这样吗?我整天都在阅读 StackOverflow 页面,但似乎与此无关。我已经阅读了一堆关于 JS 闭包(这可能仍然是问题)之类的内容,但这些似乎都无关紧要,因为链接点击侦听器正在我测试过的大多数设备上工作(甚至是 Android 平板电脑的 Chrome浏览器,这是真正让我感到困惑的部分)。
如果您之前碰巧遇到过这个问题或知道为什么会发生这种情况,请在阅读下一部分之前将其写出来,以免混淆或偏见您。
好的,现在到了更令人难以置信的部分,尽管我希望这只会帮助解决这个问题并且不会混淆情况..我用 USB 将其中一部手机连接到我的电脑并使用进行了一些远程调试此处描述的 Chrome 开发人员工具 ( https://developers.google.com/chrome-developer-tools/docs/remote-debugging )。我可以在那里确认点击监听器没有工作(他们没有被触发)......(现在是疯狂的部分)直到我对链接进行了一些元素检查(即,当我再次使用 Chrome 开发工具检查浏览器中的 DOM 元素时,该链接在我的手机上突出显示)然后单击该链接。这使得点击监听器工作!什么??为了进一步调试,如果我检查页面上的任何 DOM 元素并单击链接,则单击侦听器工作。如果我从开发工具选项卡中更改选项卡,或者只是停止检查 Chrome 开发工具中的 DOM 元素,则链接单击侦听器将不再起作用。我真的不知道该怎么做,但我希望这部分信息能够缩小 Android 手机和点击监听器可能发生的情况。
很高兴尝试提供任何其他信息,尽管我目前没有用于测试的 Android 手机。
谢谢!