Jquery切换行为不一致

Question

我在动态创建的切换按钮上发生了一些奇怪的行为。它们似乎在 firefox 上运行良好，但在 Chrome 和 Safari 上，以及在 iPhone 的 safari 浏览器上，div 内容的显示和隐藏是不一致的，直到您刷新页面，然后所有按钮似乎都可以正常工作。

如果您查看下面的链接，然后选择任何选项（例如，进入决赛、顶级击球手、顶级保龄球手等），您将被带到一个充满切换按钮的页面，但内容未显示。

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

通常最前面的几个按钮不起作用，但其余的都可以。这真的很奇怪。有谁知道是什么原因造成的？请注意，javascript 和 list 元素包含在 php while 循环中，以从数据库中获取正确的值，并且 $idName = "bettype" 。 $i; （其中 $i 在每次循环过程中递增。）

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>

Answer 1

我建议更改您的代码以使用类而不是 ID。这样，您可以为所有按钮赋予相同的类，并使用一个选择器来找到它们并（在黑暗中）绑定它们。您使用的 id 迭代器用于设置像 data-id 这样的属性，您可以使用 $(this).attr("data-id") 在单击委托中访问该属性，而该属性又可用于显示或隐藏您尝试的特定元素切换。