Question

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

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

Answer 1

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

<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

Answer 2

使用此：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>

Answer 3

问题是您未正确关闭代码。您执行了，但需要将其格式化为。

请参阅： http://codepen.io/AlienHoboken/pen/kinGq

Answer 4

“button”标签的默认行为是提交。所以你需要用

指定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);
    });
});

单击时按钮消失

4 个答案: