Question

这是我到目前为止所做的：

// somewhere in the page code...
<img alt="" src="images/frame.png" onclick="uploadImage()" />

我创建了一个jQuery脚本：

// in the head section of the page...
<script type="text/javascript">
    $('#uploadContactImage').dialog({
        title: 'Change contact image',
        buttons: {
            "Upload new image": function() {
                $(this).dialog("close");
            },
            "Remove current image": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
</script>

最后，我有一个带有空函数的javascript文件：

function uploadImage() {
}

用例应该是：用户点击图像，弹出对话框。根据用户点击的按钮，应调用某些功能。

请注意，我的图片代码是通过AJAX生成的，即jQuery脚本未连接到它。这是第一个问题。

第二个问题是我不知道如何调用jQuery脚本来实际显示对话框。

第三个也是最后一个问题是我不知道如何处理用户的选择。

正如你现在必须得出结论的那样，对于jQuery来说，我是一个完全新手。你能帮助我开始吗？谢谢。

Answer 1

鲍里斯，

这很简单。首先，我不会使用onClick事件，因为jQuery有更好的方法来管理它。相反，它应该如下所示：

<强> HTML：

<img alt="" src="images/frame.png" id="imageUpload" />

<强> jQuery的：

$('img#imageUpload').dialog({
    title: 'Change contact image',
    buttons: {
        "Upload new image": function() {
            $(this).dialog("close");
        },
        "Remove current image": function() {
            $(this).dialog("close");
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    }
});

Answer 2

首先，您需要一些钩子或路径来选择图像元素。其次，因为它在文档加载后被添加到页面中，所以你需要在响应之后附加事件监听器。

选择元素

因此，如果您控制通过ajax返回的html，则为其添加一个id并使用jquery轻松选择它：

<img alt="" src="images/frame.png" onclick="uploadImage()" id="pickME" />

...and someplace in the ajax callback...
$("#pickME").click(...

如果你不能添加你需要通过从包装元素开始并寻找img后代来向下钻取它。

附上活动

当文档“准备就绪”时，您无法附加click事件，因为ajax尚未将其插入到文档中。所以这里的事情是在将img插入到文档中之后添加事件处理程序。因此，您需要捕获该事件，以便知道何时添加点击事件。

ajax(... success: function(data){ ...stuff data into document... $("#pickME").click(function(){ ...attach the dialog to the element...

你可能超出了你的深度; - ）

如何在用户点击<img/>时显示对话框？

2 个答案: