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

发布于 2024-10-14 15:58:27 字数 1023 浏览 2 评论 0原文

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

// 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，我完全是个新手。你能帮我开始吗？谢谢。

原文

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:

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

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.

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

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独享拥抱 2024-10-21 15:58:27

鲍里斯，

这很简单。首先，我不会使用 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");
        }
    }
});

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:

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

回复收藏 0 原文

一束光，穿透我孤独的魂 2024-10-21 15:58:27

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

选择元素

因此，如果您可以控制通过ajax返回的html，请向其中添加一个id，然后使用jquery简单地选择它：

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

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

如果您无法添加id，则必须从包装元素开始向下钻取它，然后寻找 img 后代。

附加事件

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

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

你可能超出了你的能力范围;-)

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:

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

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.

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

you might be out of your depth ;-)

回复收藏 0 原文

~没有更多了~