jQuery документ о событии ('click'), предотвращающий появление формы ('submit') - PullRequest
Новая
       26

jQuery документ о событии ('click'), предотвращающий появление формы ('submit')

0 голосов
/ 29 ноября 2018

У меня есть HTML div img_div, который получает динамически сгенерированный контент, включая форму.Форма имеет input type="file" и input type="submit".

. Я написал функцию jquery showImg(), которая динамически заполняет img_div и переопределяет событие отправки формы, которое предотвращает обновление страницы и добавляет загруженные файлы.по форме.

showImg() отлично работает самостоятельно.Однако я хочу, чтобы img_div исчезал, когда пользователь щелкает где-либо еще на странице, поэтому я создал обработчик события $(document).click(), чтобы скрыть div, когда пользователь щелкает в другом месте.Это событие также работает, за исключением случаев, когда я его реализую, теперь страница обновляется, когда я отправляю свою форму в img_div.

Чтобы было ясно, если я отключу событие $(document).click(), к форме добавляется изображение безОбновление страницы.Если я включу событие $(document).click(), форма обновит страницу и перейдет на страницу, отображающую только загруженное изображение.

Почему обработчик события $(document).click() препятствует запуску обработчика события on('submit', 'form')?Как я могу получить два обработчика событий для обоих при запуске формы?Я пытался использовать event.stopPropagation() на input type="submit" в моей форме, но это не имело никакого эффекта.

Вот img_div html: 

<div id="img_div" class="pop_up_menu" style="position:absolute; left:'. (135) .'px; background-color:#FFF; display:none; min-width:800px"></div>

А вот функции JS: 

$(document).click(function( event ) {
    if (event.target.id != 'img_div' && $(event.target).parents('#img_div').length == 0) {
        var tag = 'div';
        var element_class = 'pop_up_menu';
        var div_list = document.getElementsByTagName(tag);
        for(var i=0;i<div_list.length;i++)
        {
            if(div_list[i].className == element_class)
            {
                var el_id = '#'+div_list[i].id;
                $(el_id).off();
                div_list[i].innerHTML="";
                div_list[i].style.display = 'none'; 
            }
        }
    } else {
    }
});

function showImg(event, divID, category, id)
{
    var y = event.pageY;
    var x = event.pageX;

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById(divID).style.display = 'inline';
            document.getElementById(divID).innerHTML = xmlhttp.responseText;
            document.getElementById(divID).style.top = y+'px';
            document.getElementById(divID).style.left = x+'px';
            document.getElementById(divID).style.border="1px solid #A5ACB2";
        }
    }

    var url = "/rtd/plugins/includes/image_popup.php?category="+category;
    url += "&id="+id;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    $('img_div').off();
    $('#img_div').on('click', 'input', function( event ){
        event.stopPropagation();
    });
    $('#img_div').on('submit', 'form', function( event ){
        event.preventDefault();

        var rowid = 'row_'+Date.now();
        var rowpointer = '#'+rowid;
        var form_id = $(this).attr('id');
        var form_pointer = '#'+form_id;
        var form = $(form_pointer)[0];
        var formData = $(form_pointer).serialize();
        var action_url = $(form_pointer).attr('action');

        var fileData = new FormData(this);

        var ajIMAGE = $.ajax({
                type: 'POST',
                url: action_url,
                data: fileData, 
                contentType: false, 
                processData: false
            })
        ajIMAGE.done(function ( data ) {
            $("#image_table").append('<tr><td id="'+rowid+'">'+data+'</td></tr>');
            $("#noimage").hide();
            $(form_pointer).trigger('reset');
        });
    });
}
...