Jqueryが一貫して動作しない

Question

私は動的に作成されたトグルボタンで何らかの奇妙な動作が起こっています。彼らはFirefox上でうまく動作するようだが、ChromeとSafari、さらにiPhoneのSafariブラウザでは、divコンテンツの表示と非表示が矛盾しているため、ページを更新するまですべてのボタンが正常に動作するようだ。

以下のリンクを参照して、選択肢のいずれかを選択すると（例えば、Reach Final、Top Batsman、Top Bowlerなど）、トグルボタンで満たされたページに移動し、コンテンツは表示されません。

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のクラスを使用するようにコードを変更することをお勧めしたいです。そうすれば、すべてのボタンに同じクラスを与え、セレクターを1つ選択して、それらをすべて（闇の中で）見つけることができます。 idイテレータを使用してdata-idのような属性を設定すると、$(this).attr("data-id")を使用してクリックデリゲート内でアクセスできます。これは、切り替えようとしている特定の要素を表示または非表示にすることができます。