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 スクリプトはそれに接続されていません。それが最初の問題です。

2 つ目の問題は、jQuery スクリプトを呼び出して実際にダイアログを表示する方法がわからないことです。

最後の 3 番目の問題は、ユーザーの選択をどのように処理すればよいかわからないことです。

もうお分かりだと思いますが、私は jQuery に関してはまったくの初心者です。始めるのを手伝ってもらえますか？ありがとう。

4

2 に答える 2

2

ボリス、

これは非常に簡単です。まず、jQuery にはこれを管理するためのはるかに優れた方法があるため、onClick イベントは使用しません。代わりに、次のようになります。

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 に答える