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

4

2 回答 2

2

鲍里斯，

这很简单。首先，我不会使用 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");
        }
    }
});
于 2011-01-27T07:13:04.103 回答
-1

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

  • 选择元素

因此，如果您可以控制通过 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...

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

于 2011-01-27T07:26:33.380 回答