2016-08-23 6 views
1

아약스 사용하기 드롭 다운 메뉴에 테이블 행을 삽입합니다. 그것은 작동하고 그것을 표시합니다. 그러나 행을 클릭 할 때 이벤트를 첨부하고 싶습니다. 그러나 시도한 것은 작동하지 않습니다. 무엇이 문제 일 수 있습니까?JQuery를 통해 PHP로 만든 요소에 이벤트 첨부하기

내가 AJAX PHP를 가져에 의해 생성 된 클래스 .player에 행을 원하는 AJAX

<?php 

$team = $_GET["team"]; 
$id = $_GET["id"]; 

$con = mysqli_connect('localhost','root','','sportacus'); 

$query = "SELECT * FROM " . $team . "_team WHERE incourt = 0 ORDER BY number"; 
$result = mysqli_query($con,$query); 

while($row = mysqli_fetch_assoc($result)){ 
    echo "<tr class='player' id='" . $team . "-player" . $row['id'] . "'> 
       <td>" . $row['number'] . "</td> 
       <td>" . $row['first_name'] . " " . $row['last_name'] . "</td> 
      </tr>"; 
} 

mysqli_close($con); 

?> 

에 의해 페치 PHP

<?php 

for($i=1; $i<=2; $i++){ 
    echo "<div class='medium-block dropdown'> 
      <div class='dropdown-toggle stat-dropdown not-added' id='away" . $i . "' data-toggle='dropdown'> 
       <p class='vertical-center add-player' id='add-player" . $i . "' style='margin:0;'>Add Player</p> 
      </div> 
      <ul class='dropdown-menu drop-scroll' style='margin:0; padding:0; border-radius:0;'> 
       <table class='table table-hover' style='margin:0;'> 
        <tbody id='choose-player-away" . $i . "'> 
        </tbody> 
       </table> 
      </ul> 
      </div>"; 
} 
for($i=3; $i<=5; $i++){ 
    echo "<div class='medium-block dropup'> 
      <div class='dropdown-toggle stat-dropdown not-added' id='away" . $i . "' data-toggle='dropdown'> 
       <p class='vertical-center add-player' id='add-player" . $i . "' style='margin:0;'>Add Player</p> 
      </div> 
      <ul class='dropdown-menu drop-scroll' style='margin:0; padding:0; border-radius:0;'> 
       <table class='table table-hover' style='margin:0;'> 
        <tbody id='choose-player-away" . $i . "'> 
        </tbody> 
       </table> 
      </ul> 
      </div>"; 
}?> 

JQuery와

<script type="text/javascript"> 
$(document).ready(function(){ 
     scalability(); 
     $(window).resize(scalability); 
     $(".not-added").each(function(i){ 

      $(this).click(function(){ 
       var identifier = $(this).attr('id').charAt(4); 
       var teamid = $(this).attr('id').substring(0,4); 
       if($(this).hasClass("not-added")){ 
        if (window.XMLHttpRequest) { 
         // code for IE7+, Firefox, Chrome, Opera, Safari 
         xmlhttp = new XMLHttpRequest(); 
        } else { 
         // code for IE6, IE5 
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");     
         } 

        xmlhttp.onreadystatechange = function() { 
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
          document.getElementById("choose-player-"+teamid+identifier).innerHTML = xmlhttp.responseText; 
         } 
        }; 
        xmlhttp.open("GET","getPlayerlist.php?team="+teamid+"&id="+identifier,true); 
        xmlhttp.send(); 

        $(".player").on('click',function(){ 
         alert("working"); 
        }); 
       } 

      }); 

     }); 

    }); 
</script> 

PHP 파일 파일을 클릭 할 수 있습니다.

참고 : 도움이 될 경우 부트 스트랩 라이브러리를 사용하고 있습니다. 부분을 ​​제외한 모든 다른 작품 :

$(".player").on('click',function(){ 
    alert("working"); 
}); 

답변

0

event binding on dynamically created elements에보고처럼 당신이 이벤트를 위임 할 필요가있다.

$(".player").on('click',function(){ 

에 :

$(document).on('click', ".player", function() { 
    alert("working"); 
}); 
귀하의 경우에는

, 당신은에서 변경해야
관련 문제