jQuery click only works once even though I use on("click")

Question

.glyphicon-refresh

is a button that refreshes a section of the page dynamically. After refresh, I want it to click refresh after 5 seconds, but it only works once.

Why?

click

$("#btnRefresh").on("click", ".glyphicon-refresh", function (e) {
  console.log("clicked");
});

setInterval

setInterval(function () {

  $(".glyphicon-refresh").click();
  console.log("ok");

  if ($("#waitingOrders").length) {
    console.log("there are new orders");
  } else {
    console.log("the page is empty");
  }
}, 5000);

can you create a working snippet using `<>` and replicate this issue here? — gurvinder372, Nov 07 '17 at 10:27
Is `#btnRefresh` part of the content that "refreshes"? Please provide enough code to demonstrate what's happening. — David, Nov 07 '17 at 10:28
@David, YES! gurvinder372 I'm going to provide more details in a few minutes. — salep, Nov 07 '17 at 10:31
@salep: It's entirely possible, you just have to do a [mcve] -- which is a good idea anyway. — T.J. Crowder, Nov 07 '17 at 10:31
use $(document).on("click", ".glyphicon-refresh", function (e) { console.log("clicked"); }); — Rishi0405, Nov 07 '17 at 10:32
@salep: The linked duplicate explains in detail. But basically you're binding your event to an element that gets replaced. When it does, you lose the event binding. This old blog entry of mine has some explanation as well: https://publicvoidlife.blogspot.com/2014/03/on-on-or-event-delegation-explained.html — David, Nov 07 '17 at 10:35

score -2 · Answer 1 · answered Nov 07 '17 at 10:35

-2

works fine for me:

setInterval(function () {

  $(".glyphicon-refresh").click();
  console.log("ok");

  if ($("#waitingOrders").length) {
    console.log("there are new orders");
  } else {
    console.log("the page is empty");
  }
}, 5000);

$("#btnRefresh").on("click", ".glyphicon-refresh", function (e) {
  console.log("clicked");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-refresh"></span> Refresh
</button>

answered Nov 07 '17 at 10:35

O.M.N.L

179
7

Thanks for the downvote and telling the reason why. – O.M.N.L Nov 07 '17 at 11:10
In general, "your code works" is better as a comment than as an answer. When the code in the question works, it's a sign of a bad question and answering a bad question is of little value. In this case, for example, the actual problem wasn't presented in the question. Which means that (A) this doesn't actually solve the problem and (B) the question and answer would be of no use to future readers with the same problem. You are encouraged to learn more about Stack Overflow here: https://stackoverflow.com/help – David Nov 07 '17 at 12:51

jQuery click only works once even though I use on("click")

1 Answers1