javascript - DIV 不显示在与变量的链接上

Question

出于某种原因，当我单击一个按钮时，某个 div 现在会显示。我是 JS 的新手，所以无法真正弄清楚为什么它只在那个上。基本上顺序应该是

点击添加镜头 -> 显示游戏和回合(工作正常) -> 点击提交 -> 在每一轮显示目标(工作正常) -> 点击目标 -> 显示填写表格(“fillshotsdiv”)(不是工作)。

下面是我的代码。我错过了什么？

JS

<script>
$(function() {
    $(".but").on("click",function(e) {
        e.preventDefault();
        $(".contentfill").hide();
        $("#"+this.id+"div").show();
    });
});
function refreshTargets() {
    var load = $.get('functions.php',{gameShots:"<?php echo $_GET['gameShots']; ?>", roundShots:"<?php echo $_GET['roundShots']; ?>",function:"drawTargets"});
    $(".targetinfo").html('Refreshing');
    load.error(function() {
        console.log("Mlkia kaneis");
        $(".targetinfo").html('failed to load');
        // do something here if request failed
    });
    load.success(function( res ) {
        console.log( "Success" );
        $(".targetinfo").html(res);
    });
    load.done(function() {
        console.log( "Completed" );
    });
}
</script>

HTML

<div id="addshotsdiv" class="contentfill">
  <form action="">
    <select name="gameShots" class="gameShot">
    <script>
      refreshGameDel();
    </script>
    </select>
    <select name="roundShots" class="roundShot">
      <option value="nothing">-----</option>
      <option value="Round 1">Round 1</option>
      <option value="Round 2">Round 2</option>
    </select>
    <button type="submit" >Submit</button>
  </form>
</div>


<div class="targetinfo">
  <script>
    refreshTargets();
  </script>
</div>


<div id="fillshotsdiv" class="contentfill">
    <form method="post" action="addScoreToRound.php?targetNo=<?php echo $_GET['targetNo'];?>&gameNo=<?php echo $_GET['gameNo'];?>&roundName=<?php echo $_GET['roundName']; ?>">
    <table border="1">
      <tr><th>Shot Number</th><th>Arrow 1</th><th>Arrow 2</th><th>Arrow 3</th></tr>
      <tr><td>1</td><td><input type="text" name="arrow_1_1"></td><td><input type="text" name="arrow_1_2"></td><td><input type="text" name="arrow_1_3"></td></tr>
      <tr><td>2</td><td><input type="text" name="arrow_2_1"></td><td><input type="text" name="arrow_2_2"></td><td><input type="text" name="arrow_2_3"></td></tr>
      <tr><td>3</td><td><input type="text" name="arrow_3_1"></td><td><input type="text" name="arrow_3_2"></td><td><input type="text" name="arrow_3_3"></td></tr>
      <tr><td>4</td><td><input type="text" name="arrow_4_1"></td><td><input type="text" name="arrow_4_2"></td><td><input type="text" name="arrow_4_3"></td></tr>
      <tr><td>5</td><td><input type="text" name="arrow_5_1"></td><td><input type="text" name="arrow_5_2"></td><td><input type="text" name="arrow_5_3"></td></tr>
      <tr><td>6</td><td><input type="text" name="arrow_6_1"></td><td><input type="text" name="arrow_6_2"></td><td><input type="text" name="arrow_6_3"></td></tr>
      <tr><td>7</td><td><input type="text" name="arrow_7_1"></td><td><input type="text" name="arrow_7_2"></td><td><input type="text" name="arrow_7_3"></td></tr>
      <tr><td>8</td><td><input type="text" name="arrow_8_1"></td><td><input type="text" name="arrow_8_2"></td><td><input type="text" name="arrow_8_3"></td></tr>
      <tr><td>9</td><td><input type="text" name="arrow_9_1"></td><td><input type="text" name="arrow_9_2"></td><td><input type="text" name="arrow_9_3"></td></tr>
      <tr><td>10</td><td><input type="text" name="arrow_10_1"></td><td><input type="text" name="arrow_10_2"></td><td><input type="text" name="arrow_10_3"></td></tr>
    </table>
    <button type="submit">Submit</button>
  </form>
</div>

refreshTargets调用的PHP是

if($_GET['function']=="drawTargets")
    {
        $gameNo = $_GET['gameShots']; 
        $roundName = $_GET['roundShots']; 
        $sql=mysql_query("SELECT * FROM tbl_Round WHERE match_id='$gameNo' && round_name='$roundName'")
            or die(mysql_error());
        while ($row = mysql_fetch_array($sql)) {
            echo '<p><a href="admin.php?targetNo='.$row["target_name"].'&gameNo='.$gameNo.'&roundName='.$roundName.'"><button class="but" id="fillshots" type="button">'.$row["target_name"].'- Player'.$row['player_id'].'</button></a></p>';
        }
    }

Answer 1

您需要在点击处理程序上使用事件委托(delegate)，因为 .but 是一个动态插入的元素:

$('.targetinfo').on('click', '.but', function(e) {
    e.preventDefault();
    $('.contentfill').hide();
    $('#' + this.id + 'div').show();
});