jquery - 使用 jQuery 附加 jQuery

Question

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

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

这是删除文件的脚本:

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。还有其他方法可以做到这一点吗？

Answer 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>