Javascript 按钮需要点击两次才能触发功能

我知道这很难理解，但请试一试。 看一下屏幕截图

小输入框的名称是

murl

add（）

用于提交表单。如果

murl

为空，则必须直接提交表单，如果不为空，则必须根据数据库检查

murl

条目（如果存在）。如果它不存在，则调用

add（）

问题是必须单击两次

按钮才能触发该功能。

按钮上的代码为：

<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();
    }
}

函数niju（）
{
var标志=1；
var micro=document.getElementById（'murl'）.value；
$（“#微submit”）。单击（函数（）
{
如果（micro==“”）
{
添加（）；
}
其他的
{
//删除所有类添加messagebox类并开始淡入淡出
$（“msgbox”）
.removeClass（）
.addClass（'messagebox'）
.text（'正在检查…'））
.fadeIn（“慢”）；
//从ajax检查用户名是否存在
$.post（“inc/user\u availability.php”，
{murl:$（“输入：murl”）.val（）}，
功能（数据）
{
if（data='no'）//如果用户名不可用
{
$（“#msgbox”）.fadeTo（200,0.1，function（）//开始淡入messagebox
{
//添加消息并更改框的类别，然后开始淡入淡出
$（本）
.html（'此用户名已存在'）
.addClass（'messageboxerror'）
.fadeTo（900,1）；
flag=0；
});
}
其他的
{
$（“msgbox”）
//开始淡入messagebox
.fadeTo（200,0.1，函数（）
{
//添加消息并更改框的类别，然后开始淡入淡出
$（本）
.html（'可注册的用户名'）
.addClass（'messageboxok'）
.fadeTo（900,1）；
flag=1；
添加（）；
});
}
});
}
});
如果（micro==“”&&flag==1）
{
添加（）；
}
}

截图：


必须单击两次，因为您正在定义函数内的
#microsubmit
的
单击事件。因此，第一次单击时绑定事件处理程序，第二次单击时事件处理程序就位并被触发。我还没有讨论您试图完成的操作背后的逻辑，但我的猜测是，如果您将事件绑定器移到函数外部，并确保所有变量都在正确的范围内，那么它就会工作。
第一次加载页面时，单击处理程序不会挂接到按钮上，直到您第一次调用niju（）并挂起click事件时单击按钮。你需要像这样做

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

并从按钮声明中删除onclick
将您的标志移出函数niju

 var flag=1;
function niju()
{
}

修复编辑新月形的可靠工作