JQuery로 동적 버튼에 onClick 할당

각 행에 하나의 버튼을 동적으로 생성하는 테이블이 있습니다. 따라서 3 개의 행이있는 경우 각 행의 3 번째 열에 3 개의 버튼이 생깁니다.JQuery로 동적 버튼에 onClick 할당

나는 두 가지 수준에서 문제에 직면하고있다 :

내가) 모든 버튼의 '온 클릭'에서 호출되는 하나의 기능을 할당. ii) 예를 들어 과 같이 눌린 버튼의 해당 열 값을 읽습니다. 3 열이 있다고 가정하고 2 행 3 열에서 버튼을 누르면 2 열의 값을 읽어야합니다 행, 1 및 2 열.

전체가 동적으로 구축됩니다.

<script> 
     $(document).ready(function(){ 
      $("openBtns").on('click', '.btns', function() { 
       OpenSession(); 
      }); 
     }); 
     function OpenSession(){ 
      window.location.replace('Sessions.php'); 
     } 
</script>

이렇게 어디서하는 방법에 대한 몇 가지 도움이 필요하십니까 : 여기

<body> 
    <div id="up"></div> 
    <table id = "tab" style="width:500px"> 
     <tr> 
      <th>Date/Time</th> 
      <th>Session Activity</th> 
      <th>Action</th> 
     </tr> 
      <?php 
        $uid = $_SESSION["uid"]; 
        $client = $_SESSION["Client"]; 
        $con = mysqli_connect('localhost', 'root', '12345', 'MyDB'); 
        if (mysqli_connect_errno()){ 
         echo "<option value='".'0'."'>".'Connection Error'."</option>"; 
         exit(); 
        }else{ 
         $res=mysqli_query($con, "select * from TL_Session_Notes Where Uid = '".$uid."' AND CName = '".$client."'"); 
         while($row=mysqli_fetch_array($res)) 
         { 
          echo "<tr><td>".$row['Sn_date'].'/'.$row['Sn_time']."</td><td>".$row['Sn_activity']."</td>". 
          "<td id = '"."openBtns"."'><input type='"."button"."' class = '"."btns"."' value = '"."Open Session Note"."' action = '"."OpenSession()"."'/>"."</td></tr>"; 
         } 
        } 
        mysqli_close($con); 
      ?> 
    </table> 
    <div id="down"></div> 
</body>

내가 (I) 부분의 작업을 얻기 위해 시도한 코드 : 여기

는 테이블 내 접근 방식이 잘못되었습니다.

출처

2014-04-17 Priyabrata

id가 openBtns 인 요소가 여러 개 있습니까? 또한 불필요한 문자열 연결 (. 연산자의 과용)을 수행하고 있습니다. –

요소가 동적으로 생성 될 때 다른 요소에 다른 ID를 사용하는 방법은 무엇입니까? – Priyabrata

당신은 그 id가 필요 없다 : s, 나는 생각한다 –

시도 :

이

<html> 
<head> 
    <script type="text/javascript"> 
    function OpenSession(date, time, activity) 
    { 
/* here we can do something creative with the arguments date, time and activity */ 
      window.location.replace('Sessions.php'); 
    } 
    </script> 
</head> 
<body> 
    <div id="up"></div> 
    <table id="tab" style="width:500px"> 
     <tr> 
      <th>Date/Time</th> 
      <th>Session Activity</th> 
      <th>Action</th> 
     </tr> 
<?php 
     output_rows(); 
?> 
    </table> 
    <div id="down"></div> 
</body> 

<?php 
function output_rows() 
{ 
    $uid = $_SESSION["uid"]; 
    $client = $_SESSION["Client"]; 

    $con = mysqli_connect('localhost', 'root', '12345', 'MyDB'); 

    if (mysqli_connect_errno()){ 
      echo "<option value='0'>Connection Error</option>"; 
    }else{ 
     $name = mysql_escape_string($name); 
     $client = mysql_escape_string($client); 
     $res=mysqli_query($con, "select * from TL_Session_Notes Where Uid='$uid' AND CName='$client'"); 

     while($row=mysqli_fetch_array($res)) 
     { 
      $date = $row['Sn_date']; 
      $time = $row['Sn_time']; 
      $activity = $row['Sn_activity']; 

      echo "<tr>"; 
       echo "<td>$date/$time</td><td>$activity</td>";    
       echo "<td><input type='button' class='btns' value='Open Session Note' onclick='OpenSession(\"$date\", \"$time\", \"$activity\")' /></td>"; 
      echo "</tr>"; 
     } 
    } 

    mysqli_close($con); 
} 
?> 
</body> 
</html>

출처

2014-04-17 19:28:27

음, $ name에는 가치가 없다는 것을 알았습니다 ... –

예, $ name param이 없습니다. 나머지는 괜찮습니다. 고맙습니다 :) – Priyabrata

td.openBtns도 동적으로 추가됩니다. 정적/비 동적 인 선택기를 사용해야합니다.

모양은 #tab과 같습니다.

$("#tab").on('click', '.btns', function() { 
    OpenSession(); 
});

또는 ID가 "openBtns"있는 테이블을 가지고 있기 때문에 선택기 $("openBtns") 모든 <openBtns> 요소

를 취하고있다

$(document).on('click', '.btns', function() { 
    OpenSession(); 
});

출처

2014-04-17 19:03:45 Krishna

잘 작동하지 않는다. – Priyabrata

@Priyabrata - 문제를 재현하는 jsfiddle를 만들 수 있습니까? – Krishna

@Priyabrata -'$ (document)'사용. 업데이트 된 답변보기. – Krishna

시도, 당신은 ID 전에 #를 추가해야합니다.

$("#openBtns").on('click', '.btns', function() { 
     OpenSession(); 
});

출처

2014-04-17 19:04:30 Hatsjoem

작동하지 않습니다. 나는 이것을 일찍 시도했다. – Priyabrata

이 요청의 두 번째 부분을 해결해야한다.

$('.openBtns').on('click', '.btns', function() { var td1 = $(this).closest('td').prev('td').text(); var td2 = $(this).closest('td').prev('td').prev('td').text() alert(td1 + ' ' + td2); });

출처

2014-04-17 19:42:58 Shawn

JQuery로 동적 버튼에 onClick 할당

답변

관련 문제