Jquery 图像书签在 Django 中不起作用答案

【问题标题】：Jquery image bookmarklet not working in DjangoJquery 图像书签在 Django 中不起作用
【发布时间】：2016-07-02 03:19:12
【问题描述】：

我正在通过示例学习 Django，在一章中，在 Django 应用程序中构建了一个 Jquery 小书签，以便用户可以轻松地将网站中的 jpg 图像保存到 Django 应用程序内的用户个人资料区域。

我不是经验丰富的 JS 或 Jquery 程序员，但几年前我做过一些 JS 并且可以阅读代码，但是教程确实给出了我遵循的操作的确切说明，尽管我已经设法获得了书签按钮出现在 Chrome 的书签栏中，当我在浏览带有 jpg 图像的网页时单击它时没有任何反应。

这是我本地的 Django 仪表板，其中书签按钮被添加到书签栏，这部分工作正常

这就是点击后的样子，这对我来说什么都没有发生

https://github.com/davejonesbkk/bookmarks/blob/master/images/static/js/bookmarklet.js

与本书附带的文件相比，我能看到的唯一不同之处是缩进有点偏离，但由于某种原因，当我上传到 Git 时，缩进似乎确实发生了一些变化，他们在本地看起来不像。缩进在 JS 中重要吗？

【问题讨论】：

标签： javascript jquery django

【解决方案1】：

我在同一本书中使用了相同的示例，但没有遇到任何问题。确保您的 dashboard.html 文件引用了正确的 javascript 文件。如果没有任何效果，请尝试手动添加书签，您可以在此处查看操作方法http://www.howtogeek.com/189358/beginner-geek-how-to-use-bookmarklets-on-any-device/，它一定会奏效。并回答你的最后一个问题，缩进在 JavaScript 中不如在 Python 中重要，因为 python 不使用任何花括号“{}”或分号“;”。但是您可以在一行中编写整个 javascript 代码，它会起作用，因为您在任何地方都使用花括号来告诉哪一行代码在哪里结束。

【讨论】：

【解决方案2】：

我同意以上所有内容。另外，如下：

我在书中发现的错误：

在bookmarklet-launcher.js 中，从bookmarklet.js 调用的js 函数称为myBookmarklet()，但是bookmarklet.js 中没有这种方式调用的函数。因此，您可能希望在两个 js 文件中使用相同的名称。然而，实际上，小书签将始终有效，因为在内存中找不到 myBookmarklet 函数，bookmarklet-launcher.js 将 bookmarklet.js 脚本附加到 body 元素，并且 bookmarklet.js 是一个自调用函数，其内容被执行（无需调用它）。这里还有一些其他有趣的技术（bookmarklet.js 中的关键函数不是自调用的，但无论如何它总是会被调用，因为脚本会检查 jQuery 是否存在......）但是好的，这对于那些忙于提到的书 (Django 2 by example)。

检查书签是否，一旦你点击它，是否被添加到当前网页：

2.1。打开 devtools（Chrome 上的 F12）并检查例如在 html head 元素中是否找到新添加的包含 css 属性的链接元素和/或在 body 元素中是否找到包含对 bookmarklet.js 文件的引用的脚本元素。

2.2。替代方案：在 bookmarklet.js 脚本顶部添加一条警报消息，以便在正确加载时启动它。示例：

(function(){
    alert('bookmarkled loaded!');
    var jquery_version =...

【讨论】：

+1 用于指出第 1 处的错误。我在整章中搜索了 myBookmarklet 函数的定义，但在任何地方都没有找到。现在我确定这是一个错字。

【解决方案3】：

确保您仅尝试在 HTTP 站点上使用它。由于您使用相同的协议提供服务。 HTTPS 站点总是会告诉你：你的 jquery 加载有问题。我就是这样解决了我的问题。

【讨论】：

【解决方案4】：

伙计。我已经解决了像你一样遇到的问题。

最重要的是注意语法错误（没有警告），主要是由于忽略了空白。例如，在以下行中：

 jQuery('#bookmarklet .images').append('<a href="#"><img src="'+image_url+'"/></a>');

#bookmarklet 和 .images 之间应该有一个空格，因为 jquery 语法规则（意思是在之前的结果中搜索 id 为 bookmarklet 的标签和类等于 images 的标签）。

另外两个值得注意的地方是包含#bookmarklet .images a和#bookmarklet #close的代码，过滤条件之间需要空格。

这就是我发现我主要是在学习 jquery 语法之后犯错误的地方。

您最好将您的代码与某人已经加载到 github 的代码进行比较，以确保没有更多的小错误（例如拼写）。

【讨论】：