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

这是我到目前为止已经做出：如何在用户点击<img>时显示对话框？

// 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的。你能帮我开始吗？谢谢。

来源

2011-01-27 Boris

不能运行AJAX后的jQuery选择完成后，新的元素被添加到DOM？因此，而不是“onclick”，你会做更多的jQuery标准$（'＃myNewImage'）。click（function（）{....}）; – pthulin 2011-01-27 07:15:30

AJAX完全可以接受后运行jQuery选择器。你可以发布一个答案，我可以看到jQuery脚本应该去哪里？另外，我在哪里把对话框代码，在函数内？如果是，如何？ :) – Boris 2011-01-27 07:28:17

鲍里斯，

这很容易做到。首先，我不会使用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-27 07:13:04 Mitch

-1

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

选择元素

所以，如果你有通过ajax返回的HTML控件的ID添加到它，并与jQuery选择它平凡：

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

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

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

附加事件

当文档是“准备”，因为AJAX已经不是插入到文档中但你不能将click事件。所以这里的事情是在之后添加事件处理程序img插入到文档中。因此，您需要捕获该事件，以便知道何时添加您的点击事件。

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

你可能是你的深度;-)的

来源

2011-01-27 07:26:33

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

回答

相关问题