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> 

PHP, что refreshTargets называет это

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

Вы должны использовать делегирование событий на обработчик щелчка, потому что .but является динамически вставленный элемент:

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