Кнопка должна быть нажата дважды, чтобы вызвать функцию

Question

Я знаю, что это будет трудно понять, но, пожалуйста, попробуйте. Посмотрите на скриншот.

Имя небольшого поля ввода: murl.

add() используется для отправки формы. если murl пусто, форму необходимо отправить напрямую, если она не пуста, запись murl должна быть проверена в базе данных, если она существует. если его не существует add() называется.

Проблема в том, что button нужно дважды щелкнуть, чтобы вызвать функцию.

Код на кнопке:

<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

Его нужно дважды щелкнуть, потому что вы определяете событие #microsubmit click внутри функции. Таким образом, при первом нажатии вы связываете обработчик событий, а во второй раз обработчик событий находится на своем месте и запускается. Я не перебрал логику того, что вы пытаетесь выполнить, но я предполагаю, что если вы переместите механизм связывания событий за пределы функции и убедитесь, что все ваши переменные находятся в нужных областях, то это сработает.

Answer 2

Когда вы загружаете страницу в первый раз, обработчик кликов не привязывается к кнопке, а только до тех пор, пока вы не нажмете кнопку в первый раз, когда вы вызываете niju () и перехватываете событие клика. Вам нужно сделать что-то вроде

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

и удалите клик из объявления кнопки

Answer 3

Переместите свой флаг из функции niju.

 var flag=1;
function niju()
{
}