Question

加载时会在页面上显示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>

但由于某种原因，它不起作用。有什么建议吗？

感谢。

Answer 1

您需要将.click绑定放在$（function（）{}）中。像这样。

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

在jQuery中，$（function（）{}）是$（document）.ready（function（）{}）的简写，当加载页面的所有HTML时调用它。当您在此ready调用之外放置绑定时，它会在加载HTML之前尝试绑定。如果未加载HTML，则不存在要绑定的元素，因此不会应用任何绑定！通过在准备好的内部（或准备好的短手）移动它，我们确保所有元素都被加载并且能够被正确绑定。

Answer 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完全加载时要执行的click事件。

使用JQuery隐藏div - 无法正常工作

2 个答案: