使用 jQuery 附加 jQuery答案

【问题标题】：Appending jQuery using jQuery使用 jQuery 附加 jQuery
【发布时间】：2012-01-09 19:42:01
【问题描述】：

显然我正在尝试做一些 jQuery 不喜欢的事情。

我正在使用 javascript 上传图片。每次上传图片时，我都希望它可见，并附有一个有效的删除脚本。显示工作正常，删除没有，因为当我用萤火虫检查它时它不存在于页面上。

这是删除文件的脚本：

var insertScript = "<";
insertScript += "script type='text/javascript'>jQuery(document).ready(function($){ $('#Remove_" +
    file + "').click(function() { removeImage(\"" +
    fileName +"\", \""+ imageUID +"\", \"" +
    file + "\"); }); });";
    insertScript += "<";
    insertScript += "\/script>";

在我的页面中，我有一个包含所有图像的 div 标签，所以每次上传图像时我都会附加到它：

jQuery(document).ready(function($) {
    $('#ImageBar').append(insertScript);
    $('#ImageBar').append(insertHTML);
});

insertHTML 变量包含一个 div 标记，其中包含图像和一个删除按钮。里面没有javascript/jquery。它附加得很好。 insertScript 根本不附加。

我凭直觉尝试从 insertScript 中删除 jQuery，并用一个简单的 javascript 警报替换它，并测试是否是标签弄乱了它，但事实并非如此。附加警报时效果很好。这让我相信 jQuery 不喜欢附加 jQuery。有没有其他方法可以做到这一点？

【问题讨论】：

天哪，不不不。这个“插入脚本”业务从何而来？请描述没有此“附加脚本”的所需页面功能。页面上从什么 HTML 开始，用户做了什么，想要的结果是什么？
我怀疑您插入的脚本永远不会触发文档就绪事件。（因为文档已经加载，并且在您插入新的脚本标记时该事件已经触发。）但我不建议尝试修复它。相反，请遵循答案中给出的建议。

标签： jquery

【解决方案1】：

我建议您使用图像标签上的数据属性来存储删除所需的数据。然后，您可以为关闭按钮提供一个类并使用文档级处理程序，该处理程序为处理程序过滤具有该类的元素。使用按钮的相对定位来访问图像。

<span class="image-container">
<img  data-filename="foo.png" data-imageuid="35" data-file="foo" ... />
<button class="remove-image">X</button>
</span>

在你的页面上有一个脚本：

<script type="text/javascript">
    $(function() {
         $(document).on('click','.remove-image', function() {
             var $button = $(this),
                 $img = $button.prev('img'),
                 $container = $button.closest('.image-container');
                 removeImage( $img.data('filename'), $img.data('imageuid'), $img.data('file') );
                 $container.remove();
         });
    });
</script>

【讨论】：

太棒了，这就是我想要的。不知道您可以将数据附加到标签。

【解决方案2】：

不要尝试添加新的 jQuery 代码。相反，请使用.on 添加一个点击事件，该事件将自动应用于新创建的 DOM 元素。

$('#container_div').on('click', 'img', function () {
    $this = $(this); // the image that was clicked 
    // extract your fileName, imageUID, and file variables somehow from $this
    removeImage(fileName, imageUID, file);
});

【讨论】：

【解决方案3】：

我很想避免任何类型的“评估”行为 - 评估是邪恶的。这实际上是通过将 Javascript 嵌入到动态写入 DOM 的 HTML 标记中来执行的操作。 http://www.jslint.com/lint.html

为什么不直接使用绑定到您正在创建的实体的事件处理程序，按照这种方法... Event binding on dynamically created elements and passing parameters

【讨论】：