点击按钮消失答案

【问题标题】：Button disappears on click点击按钮消失
【发布时间】：2012-12-29 10:53:21
【问题描述】：

我有一个非常简单的HTML 文件（它是MVC 4 项目的一部分，但我也在一个普通的HTML 文件上进行了测试）包含两个按钮和一些jquery 脚本：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <div>
        <button id="btn1">Get a string</button>
        <br />
        <p id="p1" style="font-size: 12px" />
        <br />
        <button id="btn2">Get user agent</button>
        <br />
        <p id="p2" style="font-size: 12px" />
    <br />
</div>
<script>
    $(function () {
        $('#btn1').click(function () {
            $('#p1').text('clicked');
        });
    });
</script>
<script>
    $(function () {
        $('#btn2').click(function () {
            $('#p2').text(navigator.userAgent);
        });
    });
</script>
</body>

单击第二个按钮后一切正常，但单击第一个按钮 (btn1) 后，第二个按钮消失。我尝试切换它们并更改脚本的实现：

<script>
    $(function () {
        $('#btn1').click(function () {
            $('#p1').text('clicked');
        });
    });
    $(function () {

        $('#btn2').click(function () {
            $('#p2').text(navigator.userAgent);
        });
    });
</script>

和：

<script>
    $(document).ready(function () {
        $('#btn1').click(function () {
                $('#p1').text('clicked');
        });
    });
    $(document).ready(function () {
        $('#btn2').click(function () {
            $('#p2').text(navigator.userAgent);
        });
    });
</script>

但没有任何改变。
关于如何解决它的任何想法？

【问题讨论】：

你试过这个
您在这些点击功能中缺少e.preventDefault()。段落不是自动关闭的（只能包含内联元素），你只需要一个 DOM 就绪函数

标签： jquery html

【解决方案1】：

问题是您没有正确关闭 标签。你做了，但它需要像这样格式化。

见： http://codepen.io/AlienHoboken/pen/kinGq

【讨论】：

【解决方案2】：

您必须使用结束  标记。自闭标签不起作用：

<button id="btn1">Get a string</button>
<br />
<p id="p1" style="font-size: 12px"></p>  <-- here
<br />
<button id="btn2">Get user agent</button>
<br />
<p id="p2" style="font-size: 12px"></p> <-- and here

【讨论】：

【解决方案3】：

使用这个：http://jsbin.com/eqawas/1/edit

<div>
    <button id="btn1">Get a string</button>
    <br />
  <p id="p1" style="font-size: 12px"></p>
    <br />
    <button id="btn2">Get user agent</button>
    <br />
    <p id="p2" style="font-size: 12px" ></p>
</div>

【讨论】：

【解决方案4】：

“按钮”标签的默认行为是提交。所以你需要用 like 指定 type="button"

<button id="btn1" type="button">Get a string</button>

和代码onlod应该像

$(function () {
    $('#btn1').click(function () {
        $('#p1').text('clicked');
    });
    $('#btn2').click(function () {
        $('#p2').text(navigator.userAgent);
    });
});

【讨论】：