0

2 つのボタンといくつかのスクリプト を含む非常に単純なHTMLファイル (MVC 4プロジェクトの一部ですが、プレーン ファイルでもテストしました) があります。HTMLjquery

<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>

2 番目のボタンをクリックするとすべてうまくいきますが、最初のボタン ( btn1) をクリックすると 2 番目のボタンが消えます。それらを切り替えて、スクリプトの実装を変更してみました： 

<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/ekawas/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

「ボタン」タグのデフォルトの動作は送信です。したがって、type="button"をlikeで指定する必要があります

<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 に答える