Question

当我们点击<form>（顶部的黑色背景）时，我在div内部有一个HTML position:relative由jQuery / CSS显示<div id="news">框架）

jQuery工作正常，但是当你点击<input type="submit">时，没有任何反应。数据不会发送到php文件进行处理。

我尝试使用GET和POST方法，没有......

我在这里做了一个JSFiddle：

HTML：

<div id="container">
    <div id="news" class="hidden">
        <article>
            <form action="form-news.php" method="post" id="form-news">
                <label for="news-name">Name :</label>
                <input type="text" id="news-name" name="news-name">
                <input type="submit" name="submit-news" value="Ok" id="submit-news">
            </form>
            <div id="news_added"></div>
        </article>
        <br class="clear">
    </div><br class="clear">
</div>

JS：

$(document).ready( function() {
    $("#container").click(function(){
        $("#news").removeClass("hidden");
        return false;
    }); 
});

CSS：

#container{background:black; position:relative;}
#news{position:absolute; top:100px; left:50px;}
.clear{clear:both;}
.hidden{display:none;}

Answer 1

您的活动正在冒泡，因此点击该按钮会返回false .. 修复此添加事件会阻止传播。

我还更新了您的代码以使用.on而不是.click ..

http://jsfiddle.net/jFIT/64FW4/1/

$(document).ready(function () {
    $("body").on('click', '#container', function (e) {
       console.log("hit"); //check the log you will see that even the input will trigger this console.log.
       e.preventPropagation; //this stops bubbling.
       if (!$(e.target).is(':input')) { //maybe you want to check if the DIV is the only thing clicked? here is where to do this.
           $("#news").removeClass("hidden");
           return false;
       }
    });
});

Answer 2

删除JavaScript代码中的return false;，它的工作正常。

希望这个帮助

表单提交不适用于相对定位的div

2 个答案: