javascript - 機能をトリガーするには、ボタンを 2 回クリックする必要があります

Question

わかりにくいとは思いますが、よろしければお試しください。スクリーンショットを見てください。

小さな入力ボックスの名前はmurlです。

add()フォームの送信に使用されます。が空の場合murlは、フォームを直接送信する必要があります。空でない場合は、murlエントリが存在する場合はデータベースに対してチェックする必要があります。存在しない場合add()は呼び出されます。

問題はbutton、機能をトリガーするために 2 回クリックする必要があることです。

ボタンのコードは次のとおりです。

<button type="button" value="My button value" onclick="javascript: niju();" name="microsubmit" id="microsubmit">button</button> 

そのボタンが呼び出す JavaScript は次のとおりです。

function niju()
{
    var flag=1;
    var micro=document.getElementById('murl').value;

    $('#microsubmit').click(function()
    {

        if(micro=="")
        {
            add();
        }
        else
        {
            //remove all the class add the messagebox classes and start fading
            $("#msgbox")
                .removeClass()
                .addClass('messagebox')
                .text('Checking...')
                .fadeIn("slow");

            //check the username exists or not from ajax
            $.post("<?php echo SITE_ROOT;?>inc/user_availability.php",
                { murl: $("input:murl").val()  },
                function(data)
                {
                    if(data=='no') //if username not avaiable
                    {
                        $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
                        {
                            //add message and change the class of the box and start fading
                            $(this)
                                .html('This User name Already exists')
                                .addClass('messageboxerror')
                                .fadeTo(900,1);

                            flag=0;
                        });
                    }
                    else
                    {
                        $("#msgbox")
                            //start fading the messagebox
                            .fadeTo(200,0.1,function()
                            {
                                //add message and change the class of the box and start fading
                                $(this)
                                    .html('Username available to register')
                                    .addClass('messageboxok')
                                    .fadeTo(900,1);   

                                flag=1;
                                add();
                            });
                    }
                });
        }
    });

    if(micro=="" && flag==1)
    {
        add();
    }
}

スクリーンショット:

Answer 1

It has to be clicked twice because you are defining #microsubmit's click event inside the function. So the first time you click you bind the event handler, and the 2nd time the event handler is in place and gets fired. I haven't gone over the logic behind what you're trying to accomplish but my guess is that if you move the event binder outside the function and make sure all your variables are in the right scopes then it'll work.

Answer 2

ページを初めてロードするとき、クリック ハンドラーはボタンにフックされません。これは、niju() を呼び出してクリック イベントをフックする最初のボタンをクリックするまでのみです。次のようなことをする必要があります

$(document).ready() { 
   niju();
}

ボタン宣言からonclickを削除します

Answer 3

関数 niju からフラグを移動します。

 var flag=1;
function niju()
{
}