0

jquery を使用したクリック イベント ハンドラーがあります。テキスト フィールドが空白の場合は false を返します。それ以外の場合は、いくつかの変数を別の関数に送信します。イベントを再度発生させると、以前の変数がまだ設定されていて、関数が 2 回循環して新しい変数が設定されているように見えます。何が起こっているのかよくわからないので、それがうまくいくことを願っています。

クリック可能:

<p class="field_select custom" data-table="" data-field="_text">Your Custom Text</p>

ハンドラー:

$('.field_select').click(function(){

    if ($(this).hasClass('custom')){
        //This is a custom field

        //reset the input to empty
        $('#custom_text_input').val('');

        //get the data we need for our ajax function
        field = $(this).data('field');
        table = $(this).data('table');

       //open up the dialog with the input field
       $('#custom_field_div').dialog({
           modal: true,
           width: 500,
           height: 275,
           buttons: { "Ok": function() { $(this).dialog("close"); } }
       });

       //when we close the dialog check for empty value and fire function
        $('#custom_field_div').on('dialogclose', function(){
            name = $('#custom_text_input').val();
            if (name !== ''){
                //the user filled the field - fire the function.
                custom = $('#custom_text_input').val();
                append_field(field, name, custom, table);
            }
            else {
                //the user did not fill the field, do nothing.
                alert('not recording anything');
                alert(name);
                return false;

//------------------after the first blank submission the second will 
//------throw the alerts twice!!! and then the next time THREE and so on... 
                    }
                });
            }
            else{
                //this is not a custom field
               table = $(this).data('table');
               field = $(this).data('field');
               name = $(this).html();
               append_field(field, name, table);
            }
        });

非表示のダイアログ div の HTML

<div id="custom_field_div">
    <label>Enter your custom text...</label>
    <input type="text" id="custom_text_input" maxlength="255" rows="3" style="width: 100%!important; height: 50px;"></textarea>
</div>

コンソールにエラーは表示されません...

4

1 に答える 1

1

クリック ハンドラーが実行されるたびに、次の行が実行されます。

$('#custom_field_div').on('dialogclose', function(){

これにより、イベントの別のハンドラーが追加されdialogcloseます。そのイベントが発生すると、すべてのハンドラーがトリガーされます。

コードをリファクタリングして、クリック ハンドラーの外側でダイアログをセットアップするか、ダイアログを閉じるたびに破棄します。最初のオプションをお勧めします。

于 2013-08-16T21:47:00.950 に答える