0

ロード時にページに表示される div があります。この div にボタンを追加しました。ユーザーがこのボタンをクリックすると、JQuery を使用して div が非表示になります。

html は次のとおりです。

<div id="tabs" class="news1">
    <ul>
    <li><a href="#tabs-1">Track</a></li>
    <li><a href="#tabs-2">History</a></li>
    </ul>
    <div id="tabs-1">
    <table id="currentloc_table">
    <tr>
    <th></th>
    <th>Name</th>
    <!--th>Latitude</th>
    <th>Longitude</th-->
    <th>Details</th>
    </tr>
            <tr><td></td></tr>
    </table>
    </div>
    <div id="tabs-2">
    </div>

    <button>hide</button>

</div>

同じページのタグ内のスクリプトは次のとおりです。

<script>
        $(function() {
            $( "#tabs" ).tabs();
        });

        $("button").click(function() {
            $(this).parent().hide();
        });
</script>

しかし、何らかの理由でそれが機能しません。助言がありますか？

ありがとう。

4

2 に答える 2

3

.click バインディングを $(function () {}) 内に配置する必要があります。このような。

    $(function() {
        $( "#tabs" ).tabs();
        $("button").click(function() {
            $(this).parent().hide();
        });
    });

jQuery では、 $(function () {}) は $(document).ready(function () {}) の省略形で、ページのすべての HTML が読み込まれたときに呼び出されます。この ready 呼び出しの外にバインドを配置すると、HTML が読み込まれる前にバインドが試行されます。HTML がロードされていない場合、バインドする要素が存在しないため、バインディングは適用されません! これを ready (または省略形の ready) 内に移動することで、すべての要素が読み込まれ、適切にバインドできるようになります。

于 2013-04-07T18:56:34.973 に答える
2

以下にコードを配置するだけです。

$("button").click(function() {
   $(this).parent().hide();
});

の$(function() {}ようなもの：

$(function () {

    // Call the jQuery tabs
    $("#tabs").tabs();

    // Call button click event here
    $("button").click(function () {
        $(this).parent().hide();
    });
});

これにより、DOM が完全にロードされたときに実行するクリック イベントが指定されます。

于 2013-04-07T19:02:54.980 に答える