click function doesnot work after auto page refresh

Question

I am refreshing my page every 25 seconds using Javascript.But another Javascript for click function works fine before page refresh whereas after page refresh it doesnot work.

HTML:

 <div id="refreshOnline">
    <div id="refreshData">
    //Set of Functions
     <a target="_blank" href="http://example.com/startgame.php?gname='.$key['gameName'].'&player='.$_SESSION["uname"].'&type=t20" class="btn btn-primary btn-sm popup-game" id="popup-game" >Play Now!</a>
  </div>
 </div>

Javascript:

   <script type="text/javascript"> 
   //Script to refresh Div
   function show_data()
   {
    $('#refreshOnline').load('main.php #refreshData');
   }
    setInterval('show_data()', 25000);

   //Script to oprn link in new window
    $('#popup-game').click(function (event) {
    event.preventDefault();
    alert("Working");
     window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
   });
</script>

Before refresh, link opens in new window whereas after execution of refresh script, link opens in new tab instead of new window.

Javascript can't control whether `window.open()` opens a window or a tab. I'm not sure why it's inconsistent. — Barmar, Dec 29 '14 at 12:32
http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Dec 29 '14 at 12:33

score 2 · Answer 1 · answered Dec 29 '14 at 12:34

The code:

$('#popup-game').click(...

binds a click handler to the #popup-game element that exists at the moment that code runs. If that element is a child of #refreshOnline it will be replaced when you refresh #refreshOnline and so the new version of that element will not have a click bound. You can use a delegated event handler instead:

$('#refreshOnline').on('click', '#popup-game', function(event) {
  event.preventDefault();
  alert("Working");
  window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
});

This actually binds the handler to #refreshOnline, but when a click occurs jQuery automatically checks if it was on a child element that matches the selector in the second parameter and only calls your function if it does.

For more information see the .on() doco.

I used specified code but my link goes to new tab before refresh — Aj Kumar, Dec 29 '14 at 12:57

score 0 · Answer 2 · answered Dec 29 '14 at 12:32

0

This is because the click handler is not assigned to the new content. Set them again after you have changed the content like so:

<script type="text/javascript"> 
//Script to refresh Div
function show_data()
{
  $('#refreshOnline').load('main.php #refreshData');
  setClickers();
}

function setClickers(){
  //Script to oprn link in new window
  $('#popup-game').click(function (event) {
    event.preventDefault();
    alert("Working");
    window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
  });
}

$(function(){
  setClickers();
  setInterval('show_data()', 25000);
});
</script>

answered Dec 29 '14 at 12:32

Erik Terwan

2,710
19
28

2

Or just use event delegation with `.on()`. – Barmar Dec 29 '14 at 12:34
@Terwanerik But function setClickers() will not be called in tag right? – Aj Kumar Dec 29 '14 at 12:49
No only in show_data(), but you should try to use the `on()` delegate first, i had some issues with that in combination with AJAX hence my answer – Erik Terwan Dec 29 '14 at 12:51
I used the above code. But still the problem is same – Aj Kumar Dec 29 '14 at 13:05

score 0 · Answer 3 · answered Dec 29 '14 at 12:33

0

You should register the click event every time you refresh the content of the div.

answered Dec 29 '14 at 12:33

nigal

181
1
10

click function doesnot work after auto page refresh

3 Answers3