Question

我最近开始学习如何制作一个jQuery插件。这是我第一次尝试创建非常简单的东西。我仍然是jQuery的新手，并且在选择动态创建的内容时遇到了一些约束。在这种情况下，我试图选择我在插件中创建的div。

我制作了一个jsFiddle here。

我已经阅读了许多关于选择动态创建的div的帖子，其中大部分都是使用on或回调函数解决的。而且我不确定那些可以应用于这种情况。

我认为问题出现在代码的这一点上：

            $element.append("<div class=\"gifLoader\"></div>");
            $gifLoader = $element.find('.gifLoader');
            $gifLoader.css("bacground-image", "url(\"" + plugin.settings.gifSrc + "\")");
            plugin.settings.callback.call(this);

我是否可以像使用fadeTo等方法一样使用回调函数？此外，如果有人关心评论。我非常感谢我对插件布局的一些反馈。我不完全理解在制作插件时我在做什么，我只是希望学习如何使用Javascript和jQuery而不需要编码看起来如此笨重。（在我刚刚在匿名函数中使用匿名函数之前）

Answer 1

您有一个错字，一个错误：bacground-image =＆gt; background-image和src() =＆gt; url()

更改

$gifLoader.css("bacground-image", "src(\"" + plugin.settings.gifSrc + "\")");

要

$gifLoader.css("background-image", "url(\"" + plugin.settings.gifSrc + "\")");

Answer 2

使用javascript或jquery创建动态元素时，该元素不会立即反映在DOM中。如果您查看使用您之前找到的开发人员工具生成的HTML：以及之后：标记附加了HTML。

实现问题的最佳方法是在创建div时指定背景图像：

$("#element").append("<div class='gifLoader' style='background-image: url('" + plugin.settings.gifSrc + "')'></div>");

否则，如果您想要在某种用户互动上更改背景图片，可以选择：

$("#element").append("<div class='gifLoader' id='someID' someEvent='transform(someID)'></div>");

然后将函数transform（）定义为：

function transform(elementID) {
    $("#" + elementID).css("background-image", "some image URL");
}

不能在自定义插件

2 个答案: