我怎么弄清楚哪些其他JS文件干扰了我关注的一个？

Question

我有一个checkout from billing功能checkout from billing的页面 - 基本上触发了一些JS。

你可以在这里查看 。

选择蓝色和小巧并将其添加到您的购物车。

然后去结账。

输入一些虚拟数据，然后按“从结算复制”。 它不会起作用。 但是，如果您刷新页面并再次执行该过程......它将起作用。

此外，您会注意到，在第一次出现时，“送货方式”下拉列表不起作用。 但是，一旦你刷新，它确实。

我尝试在控制台中负责此功能的JS，并且它在第一次加载时工作正常。 所以我知道代码是正确的（它试图选择的所有字段都是正确的，等等）。

我该如何调试呢？

Answer 1

我能够验证您网站上的行为，并通过一个小的调整让它在第一次加载页面时工作。 我认为装载的顺序是问题的核心。

我可以通过在页面加载后重新运行piggyback.js文件中的第一行来使其工作。

这是一个快速的截屏视频，显示问题和快速修复。

如果你可以在负载结束时运行这个部分，我想这会为你解决。

更新1：您也可以在“继续结账”按钮上关闭turbolinks。 当我向链接添加data-no-turbolink =“true”，然后单击时，页面不是涡轮增压，而是作为整页刷新加载。 然后，复制传送功能按预期工作。

更新2：真正的问题很可能是你的js代码没有触发，因为它只需要一个dom ready事件。 您可以在turbolinks加载它时使用页面：load事件触发它， 如此处所述 。

Answer 2

所以这就是发生的事情......

在购物车页面上， http://apt-605.herokuapp.com/checkout/cart ，你有Proceed to Checkout按钮，有一些javascript挂钩到所有锚标签，使用锚标签的href进行ajax请求然后用从ajax调用接收的内容替换文档的内容。

这是做什么的，新内容不会像新页面一样加载，头部永远不会被渲染，并且从不加载piggybak js。

您可以验证这一点，保持firebug打开，切换到购物车页面上的网络标签。 现在，当您单击继续结帐时，您会注意到XHR请求以获取checkout ，并且加载结帐页面时不会刷新网络选项卡。 您也不会在网络标签中看到puiggybak js加载。

所以基本上你必须弄清楚你在购物车页面上使用的js是什么，它将自己附加到所有锚标签上，我猜这将是一个开箱即用的开放式导航库。

希望这可以帮助。

Answer 3

你在内容中喋喋不休吗？

你头脑不见了

<script src="/assets/piggybak/piggybak-application-1d1707f6934602bfae8e3a33d27a4a9b.js" type="text/javascript"></script>

第一次加载页面时的javascript文件。

Answer 4

我同意@Austin

脚本<script src="/assets/piggybak/piggybak-application-1d1707f6934602bfae8e3a33d27a4a9b.js" type="text/javascript"></script>

首先加载页面时没有调用，当你重新加载页面时，这个链接是动态插入的，你必须编写一些代码来处理它，如果可能的话显示代码，这样我们就可以帮助你了...