如何防止刷新页面时加载点击事件

How to prevent click event to load when refreshing page

本文关键字：加载 事件 何防止 刷新      更新时间：2023-09-26

只需要快速帮助（提前感谢）。我有一个简单的clkick事件（见下文）

document.documentElement.className = 'js';
//add the jQuery click/show/hide behaviours:
$(document).ready(function() {
  $(".reply").click(function() {
    if ($("#list1").is(":visible")) {
      $("#list1").hide();
    } else {
      $("#list1").show();
    }
    //don't follow the link (optional, seen as the link is just an anchor)
    return false;
  });
});

我的HTML是：

<div class="form-row" id="living">
  <span><a class="reply2" href="#list2">Dining Room</a></span>
  <label id="list2">
    <span>Dining Table - 6 persons</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Dining Table - 8/10 persons</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Dining Chairs</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Cabinet Dresser</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Display Unit</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Rug</span>
    <input type="checkbox" name="checkbox" checked>
  </label>
</div>

我的问题是：当我刷新页面时，如何防止我的Jquery加载，因为它在加载页面时显示检查表标记。感谢您的支持。

以下是解决方案（使用preventDefault（））：

document.documentElement.className = 'js';
//add the jQuery click/show/hide behaviours:
$(document).ready(function() {
  $(".reply").click(function(e) {
    e.preventDefault();
    if ($("#list1").is(":visible")) {
      $("#list1").hide();
    } else {
      $("#list1").show();
    }
    return false;
  });
});

现在，你的链接不会引导你使用标签。更改：只需在.click（函数（e））中添加"e"，然后使用"e"-e的方法。preventDefault（）；

您不必阻止Jquery加载。。。如果我理解正确的话，你想要的就是在加载（初始）时隐藏检查表。你可以用一些CSS:来做到这一点

#list1 {
    display : none;
}


$(document).ready(function () {
  $(".reply").click(function () {
    if ($("#list1").is(":visible")) {
      $("#list1").hide();
    } else {
      $("#list1").show();
    }
    //don't follow the link (optional, seen as the link is just an anchor)
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#list1 {
  display : none;
}
</style>
    <div class="form-row" id="living">
      <span><a class="reply" href="#list2">Dining Room</a></span>
      <label id="list1">
        <span>Dining Table - 6 persons</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Dining Table - 8/10 persons</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Dining Chairs</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Cabinet Dresser</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Display Unit</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Rug</span>
        <input type="checkbox" name="checkbox" checked>
      </label>
    </div>

相关文章：