Question

我有一个HTML div img_div，它正在接收动态生成的包含表单的内容。表单具有input type="file"和input type="submit"。

我编写了一个jquery函数showImg()，该函数动态填充img_div并覆盖了表单的Submit事件，这阻止了页面刷新并附加了表单上载的文件。

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

jQuery文档的on（'click'）事件阻止表单on（'submit'）事件

0 个答案: