文件管理器的javascript/部分逻辑

Question

我基本上试图为我的rails应用程序创建一个文件管理器，类似于WordPress的"媒体"部分的功能。我目前有一个名为 Asset 这是用户上传各种图像的地方。在其他各种模型中，我有一个图像字段，它只是一个文本字段。我希望当用户点击文本字段时，它会在模态窗口中打开一个"资产管理器"，其中包含所有图像 Asset 展示。当用户单击其中一个图像时，它应该关闭模式并使用所选图像的URL填充文本字段。

我有一个模型叫 Events 其中包含我正在谈论的文本字段。在 new 我响应js的动作，其中我加载了一个包含模态窗口中所有资产的部分，就像我期望的那样。我唯一的问题是我正在通过一个 $.getScript 调用，我不能调用任何额外的javascript将图像url加载回文本字段，我猜这是因为对象还不存在。无论如何，关于代码:

管制员

def new
  @event = Event.new
  @asset = Asset.all
end
respond_to do |f|
  f.html
  f.js
end

新的。js的

$('.acontainer').html('<%= render @asset %>');

页。js的

//when a user clicks the image field, show the asset partial
$('.image-field').click(function() {
    $.getScript('edit.js');
});

// when a user clicks an image, add it's src to the image field <-- does nothing
$('.actonainer img').click(function() {
    $('.image-field').val($(this).attr('src'));
});

任何想法将不胜感激，特别是如果有人知道更好的方法来做到这一点。:-)

Answer 1

看起来你可能正在将click事件绑定到.acontainer img dom元素当时不存在，因为您在单击时检索它们。像场。

一般来说，你应该使用 jQuery的。上 并将您的事件绑定到文档根目录。这称为委托。当您单击链接时，事件将冒泡并击中文档节点，它将处理该事件。这样，当您通过ajax或直接在DOM中添加DOM元素时，它们仍然会获得您想要的事件处理程序。

$(function() {
  $(document).on('click', '.acontainer img', function(event) {
    $('.image-field').val($(this).attr('src'));
  })
});

然而，这里有一个更大的问题。听起来你有多个。页面上的图像字段元素。你可能需要做的。image-field handler是返回HTML而不是js，因此您可以将事件绑定到新添加的HTML的根元素。该块将标识特定的输入字段，一旦图像被点击，它可以设置其值。

$(function() {
    $(document).on('click', '.image-field',
    function(event) {
        var field = $(this);
        $.ajax('/edit', {
            success: function(data, textStatus, jqXHR) {
                var blah = $(Dialog.new(data));
                // Create a modal and return its root DOM element
                blah.on('click', 'img',
                function(event) {
                    field.val($(this).attr('src'));
                });
            }
        })
    });
});

最后，您可能需要考虑为您的资产使用RESTful控制器。您可能不希望从名为EventsController的控制器中获取一个资源（资产），特别是使用编辑操作。你想让AssetsController::index返回一个资产列表。

Answer 2

当您单击图像时，没有任何事情发生，因为初始查询 ".acontainer img" 没有返回任何元素，所以事件处理程序没有附加到任何东西。他们还没装上子弹。

你可能想试试 jQuery的 live 方法.它将处理程序附加到页面加载时存在的元素 和 元素后来添加到DOM中。

---

更新资料: 正如@aceofspades所指出的那样, live 在jQuery1.7中被弃用。使用方法 on 相反。