如何在用戶點擊<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>時顯示對話框？

回答

相關問題