在其外部单击时关闭弹出式div

Question

I have a button on which when i click, a form opens to be filled by the user. When i click the button again the form closes. This wasn't possible as with one button i wasn't able to perform 2 functions like opening and closing of the form with one button. So, i took 2 buttons. When one button is clicked, it hides and the second button shows and the form is opened and when the second button is clicked, the same button hides and the first button shows and the form closes. I have no problem in this. Now, I also want that when user clicks anywhere outside the div form, the form should close itself. Help me do this. These are the 2 buttons.

      <input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" />
            <input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />

This is the form.

    <div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">

This is the script.

        $(document).ready(function () {
        $('#div_fieldWorkers').hide();
        $('input#NewRowCopy').hide();  });

  $('input#NewRow').click(function () {
        $('input#NewRowCopy').show();
        $('input#NewRow').hide();
        $('#div_fieldWorkers').slideDown("fast");
    });
    $('input#NewRowCopy').click(function () {
        $('input#NewRow').show();
        $('input#NewRowCopy').hide();
        $('#div_fieldWorkers').slideUp("fast");


    });

    $("html").click(function (e) {

        if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) {

        }
        else
        {
            $("#input#NewRowCopy").hide();
            $("#input#NewRow").show();
            $("#div_fieldWorkers").slideUp("fast");
       }

I an trying to hide the second button when clicked outside the form.. but not working..

Answer 1

Try

$(document).ready(function () {
    $('#div_fieldWorkers').hide();
    $('input#NewRowCopy').hide();  

    $('#NewRow').click(function (e) {
        $('#NewRowCopy').show();
        $('#NewRow').hide();
        $('#div_fieldWorkers').stop(true, true).slideDown("fast");
        e.stopPropagation();
    });
    $('#NewRowCopy').click(function (e) {
        $('#NewRow').show();
        $('#NewRowCopy').hide();
        $('#div_fieldWorkers').stop(true, true).slideUp("fast");
        e.stopPropagation();
    });

    $(document).click(function (e) {
        var $target = $(e.target);
        if ($target.closest('#div_fieldWorkers').length == 0) {
            $("#NewRowCopy").hide();
            $("#NewRow").show();
            $("#div_fieldWorkers").stop(true, true).slideUp("fast");
        }
    })
});

Demo: Fiddle