如何在用户点击时显示对话框？

Here's what I've made so far:

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

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

I have created a jQuery script:

我创建了一个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>

Finally, I have a javascript file with the empty function:

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

function uploadImage() {
}

The use case should be: User clicks the image, the dialog pops up. Based on the button the user has clicked, certain functions should be called.

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

Please note that my image tag is generated through AJAX, i.e. the jQuery script is not connected to it. That's the first problem.

请注意我的图像标记是通过AJAX生成的，即jQuery脚本没有连接到它。这是第一个问题。

The second problem is that I don't know how to call the jQuery script to actually display the dialog.

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

The third and the last problem is that I don't know how to handle the choice the user makes.

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

As you must have concluded by now, I am a complete newbie when it comes to jQuery. Can you help me out to get started? Thanks.

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

2 个解决方案

#1

Boris,

鲍里斯

This is quite simple to do. Firstly, I would not use an onClick event as jQuery has much better ways to manage this. Instead, it should look as follows:

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

HTML:

HTML：

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

jQuery:

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");
        }
    }
});

#2

-1

First you'll need some hook, or path, to select the image element. Second, since it's added to the page after the document load you'll need to attach the event listener after the response.

首先，您需要一些钩子或路径来选择图像元素。其次，由于在文档加载后将其添加到页面中，因此您需要在响应之后附加事件侦听器。

select the element
选择元素

So if you have control of the html returned via ajax add an id to it and select it trivially with jquery:

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

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

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

If you can't add the id you'll have to drill down to it by starting from the wrapping element and looking for the img descendant.

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

attach the event
附上活动

you can't attach the click event when the document is "ready" because the ajax hasn't inserted it into the document yet. So the thing here is to add the event handler after the img is inserted into the document. So you need to catch that event so you know when its time to add your click event.

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

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

you might be out of your depth ;-)

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

#1