0

いくつかの要素の onClick と呼ばれるメソッドがあります。その関数には、ボタンのクリックを検出して何らかのアクションを実行するイベント ハンドラー (JQuery $().click() ) があります。

イベント ハンドラーは、関数内のステートメントの最後のブロックである限り正常に動作し、その後に特定のコード ブロックがある場合は完全にスキップされることに気付きました。なぜそれが起こっているのですか？

編集コードの追加

  function launchPopUp(ID) {
            if ($('#popUp').is(':hidden')) {
                var serial = ID.id; // ID of the element or area clicked.
                var headData = 'SVG PopUp';
                var entData = 'Enter the data you want to store:';
                var ok = "No";
                var input = "";

                var header = addHeader(headData);
                var enterable = addEnterable(entData);
                var buttons = addButtons();

                $('#popUp').append(header);
                $('#popUp').append(enterable);
                $('#popUp').append(buttons);
                $('#popUp').show();

                $('#btnSubmit').click(function() {
                    input = document.getElementById('txtData').value;
                    if (input != "") {
                        ok = "yes";
                        $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                        closePopUp();
                    }

                });
                var collData = { "ID": serial, "header": headData, "OK": ok, "input": input };
                collection.push(collData);
            }  
        }

コントロールは、.click() の後にコード ブロックに直接ジャンプしています。

4

5 に答える 5

1

イベント ハンドラを誤解しています。

Javascript には非同期の性質があるため、(通常の場合) イベントを「待機」することはありません。

あなたのようなイベントハンドラーを登録するclick()と、（最終的に）その要素のクリックが登録されたときに関数が実行されます。その間、残りのコードの実行が続行されます。

コードをクリックに依存させたい場合は、このコードをクリック ハンドラの関数に記述するか、関数にコールバックを渡す必要があります。

イベント ハンドラーの登録は 1 回限りのプロセスであり、関数の外部で実行する必要があります。現時点では、 を呼び出すたびに新しいクリック ハンドラーを登録していますlaunchPopUp。たとえば、launchPopUp5回呼び出している場合、コード

input = document.getElementById('txtData').value;
if (input != "") {
    ok = "yes";
    $(ID).css('fill', 'green'); 
    closePopUp();
}

をクリックするとすぐに 5 回実行されます#btnSubmit。

基本的に、次のようにコードを構成する必要があります。

  1. register eventhandler for #btnSubmit- この関数でボタンがクリックされたときに何が起こっているかを定義します (入力の評価)
  2. launchPopUp最終的に実行される関数を書きます。ここにはイベントハンドラはなく、btnSubmitこれに関する評価コードはすべてイベントハンドラで行われません。
于 2012-11-02T12:44:52.430 に答える
1

これがあなたが望むものだと思います：

function launchPopUp(ID) {
        if ($('#popUp').is(':hidden')) {
            var serial = ID.id; // ID of the element or area clicked.
            var headData = 'SVG PopUp';
            var entData = 'Enter the data you want to store:';
            var ok = "No";
            var input = "";

            var header = addHeader(headData);
            var enterable = addEnterable(entData);
            var buttons = addButtons();

            $('#popUp').append(header);
            $('#popUp').append(enterable);
            $('#popUp').append(buttons);
            $('#popUp').show();

            var collData = { "ID": serial, "header": headData, "OK": ok, "input": input };
            collection.push(collData);

            $('#btnSubmit').click(function() {
                input = document.getElementById('txtData').value;
                if (input != "") {
                    collData.OK = "yes";
                    $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                    closePopUp();
                }
            });
        }  
    }

collData は、オブジェクトへの参照を含む変数であることに注意してください。そのオブジェクトはコレクションに追加され、btnSubmit ボタンがクリックされたときにクリック ハンドラー内で変更されます。このように、保存ボタンがクリックされない場合でも、オブジェクトは に追加されますcollection。しかし、それをクリックすると、オブジェクトが変更されて呼び出され、おそらく変数closePopUp()に存在するオブジェクトに対して必要なことを実行できるようになります。collection

于 2012-11-02T11:43:14.673 に答える
0 
 $('#btnSubmit').click(function() {
                    input = document.getElementById('txtData').value;
                    if (input != "") {
                        ok = "yes";
                        $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                        closePopUp();
                    }

                });

上記を loadPopup 関数の外に置き、

$(document).ready(function()
{

});

それだけで解決するかもしれません。

編集：

$('#btnSubmit').click(function()
{
    input = document.getElementById('txtData').value;
    if (input != "")
    {
        ok = "yes";
        $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
        closePopUp();
    }
    var collData = { "ID": serial, "header": headData, "OK": ok, "input": input };
    collection.push(collData);
});

var collData はクリック関数内にある必要があり、送信ボタンをクリックすると実行されます。

于 2012-11-02T10:44:14.720 に答える
0

これを試して：

var launchPopUp = function launchPopUp(ID) {
    'use strict';
    var popup = $('#popUp'), //cache #popup instead of doing multiple lookups
        headData = 'SVG PopUp',
        entData = 'Enter the data you want to store:',
        submit = null, //declare a var to cache #btnSubmit instead of doing multiple lookups
        submitHandler = function (e) { //handler can be defined anywhere in this routine
            //collData should be defined in the handler
            var collData = {
                "ID": ID.id, // ID of the element or area clicked.
                "header": headData,
                "OK": "No",
                "input": document.getElementById('txtData').value
            };
            //modify collData based on inputs at time #btnSubmit is clicked.
            if (collData.input !== "") {
                collData.OK = "yes";
                $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                closePopUp();
            }
            collection.push(collData);
        };
    if (popup.is(':hidden')) {
        popup.append(addHeader(headData));
        popup.append(addEnterable(entData));
        //if addButtons() defines/creates/adds #btnSubmit then you will need
        //to attach the handler after #btnSubmit exists in the DOM
        popup.append(addButtons());
        //once #btnSubmit is in the DOM, you can add the handler at any time
        //although I recommend doing it prior to showing #popup
        submit = $('#btnSubmit'); //cache #btnSubmit
        if (!submit.data('handlerAttached')) {
            //only need to attach the handler one time.
            //also note that attaching the handler does not fire the handler
            //only clicking the button, or calling the handler (i.e., submit.click()
            //or submitHandler(), etc.) will fire the handler.
            submit.click(submitHandler);
            //set flag to indicate that the handler has been attached.
            submit.data('handlerAttached', true);
        }
        popup.show();
    }
};

また、これらがすべて別の場所で定義されている限り:

addEnterable()
addButtons()
addHeader()
closePopUp()
collection[]

ルーチンには、ハンドラーの実行を妨げるエラーがあってはなりません。

于 2012-11-02T12:38:30.483 に答える
0

上記のコードは、正しく理解しているとうまく機能しません。ポップアップを起動するたびに、新しいクリック イベントがバインドされているように見えます。したがって、同じポップアップを 2 回起動すると、2 つの on click イベント ハンドラーがオブジェクトにバインドされます。

クロージャーの外側の変数にアクセスすることは実用的です。ただし、クロージャを定義する前に定義された変数にしかアクセスできません。

クリック イベント ハンドラーを定義した後で、"ok" の定義を移動するとします。その場合、OK は定義されず、イベント ハンドラーに別の ok が存在します。

（あなたの質問が正しいことを理解したと思います。そうでない場合はコメントしてください）

于 2012-11-02T11:06:25.217 に答える