0

我有一个非常简单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>

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

4

4 回答 4

1

您必须使用结束</p>标签。自闭标签不起作用：

<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
于 2013-01-15T10:51:58.503 回答
1

使用这个：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>
于 2013-01-15T10:52:31.387 回答
1

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

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

于 2013-01-15T10:52:42.653 回答
0

“按钮”标签的默认行为是提交。所以你需要用 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);
    });
});
于 2013-01-15T10:50:52.370 回答