CODEWITHSUNDEEP
phpjavascriptjquerygoogle-chromejquery-mobile
mojobullfrog
mojobullfrog

Reputation: 189

Jquery toggle acting inconsistently

I've got some strange behaviour taking place on my dynamically created toggle buttons. They seem to work fine on firefox, but on Chrome and Safari, plus on iPhone's safari browser, the showing and hiding of the div content is inconsistent, until you refresh the page, then all the buttons seems to work properly.

If you view the link below, then select any of the choices (eg. To Reach Final, Top Batsman, Top Bowler, etc), you will be taken to a page filled with toggle buttons, with the content not showing.

http://m.bestoddsindia.com/#/odds/cricket/competitions-level1/competitions-level2/display-all-outright-odds.php?comp1=Indian Premier League

Often the top few buttons won't work, but the rest will. It's really strange. Does anyone have any idea what could be causing this? Note, the javascript and list elements are contained within a php while loop, to obtain the correct values from a database, and $idName = "bettype" . $i; (where $i increases incrementally during each loop pass.)

JAVASCRIPT 

<script type="text/javascript">
$(document).ready(function(){
  $("#button<? echo $idName; ?>").click(function(){
    $(".divider<? echo $idName; ?>").toggle();
  });
});
</script>

HTML

<li class="dropdown-tap-bg">
<div class="dropdown-tap" id="button<?php echo $idName; ?>">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="70%" align="left"><span class="result"><?php echo ucwords($row_mainvalues['result']);?></span></td>
    <td align="left" class="price"><?php echo $row_mainvalues['Highest_Price'];?></td>
    <td align="right">
    <table class="show-all-bookmakers" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" valign="middle">Show/Hide<br/>Bookmakers</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div></li>

<li class="divider<?php echo $idName; ?> dropdown-secondaryodds-panel" style="display:none">
<!-- div content ->
</li>

Upvotes: 2

Views: 187

Answers (1)

Spencer Ruport
Spencer Ruport

Reputation: 35107

I'd suggest altering your code to use classes instead of IDs. That way you can give all the buttons the same class and make one selector to find them all and (in the darkness) bind them. The id iterator you're using to be used to set an attribute like data-id which you can access inside your click delegate using $(this).attr("data-id") which in turn could be used to show or hide the particular element you're trying to toggle.

Upvotes: 1

Related Questions