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

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

<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添加将自动应用于新创建的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

使用jQuery附加jQuery

3 个答案: