使用jQuery追加jQuery

Question

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

我正在使用javascript上传图片。每次上传一张图片，我希望它是可见的，以及有一个工作的删除脚本附加到它。当我用firebug检查它时，显示效果很好，但remove不存在，因为它不存在于页面上。

这是用于删除文件的脚本：

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

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

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

Answer 2

不要试图附加新的jQuery代码。相反，使用.on添加一个click事件，该事件将自动应用于新创建的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);
});

Answer 3

我很想避免任何形式的“eval”行为--eval是邪恶的。通过将Javascript嵌入到动态写入DOM的HTML标记中，您可以有效地做到这一点。http://www.jslint.com/lint.html

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