Assigning onClick to Dynamic Buttons with JQuery

Question

I have a table where I am creating one button in each row dynamically. So if we have 3 rows, we will have 3 buttons at the 3rd column of each row.

I am facing a problem at two levels :

i) Assigning a single function that will be called at 'onClick' of all the buttons. ii) Reading the values of the corresponding columns of the button which has been pressed, for example : Say we have 3 columns, and I press the button at the 2nd row , 3rd column, I need to read the values of the 2nd row, 1st and 2nd column.

The entire thing is built up dynamically.

Here is the table:

<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>

Here is the code I've tried to get the (i) part working :

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

Need some help on how to do this and where is my approach going wrong.

You have multiple elements with id openBtns? Also you are doing unnecessary string concatenations (overuse of the . operator). — Anders Lindén
– Anders Lindén, Commented Apr 17, 2014 at 19:12
Any way of using different ids for different elements when elements are created dynamically ? — Priyabrata
– Priyabrata, Commented Apr 17, 2014 at 19:17

Anders Lindén · Accepted Answer · 2014-04-17 19:28:27Z

Trying:

<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>

Yes, there isn't any $name param there. The rest is fine. Thank You :)

bobthedeveloper · Accepted Answer · 2014-04-17 19:04:30Z

1

The selector $("openBtns") is taking all <openBtns> elements

Since you have a table with id "openBtns", you need to add # before the id.

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

answered Apr 17, 2014 at 19:04

bobthedeveloper

3,7832 gold badges17 silver badges31 bronze badges

Comments

Venkata Krishna · Accepted Answer · 2014-04-17 19:11:13Z

1

Your td.openBtns is added dynamically too. You have to use a selector which is static/non-dynamic.

Looks like #tab is the one you want.

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

or try

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

edited Apr 17, 2014 at 19:11

answered Apr 17, 2014 at 19:03

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

3 Comments

Venkata Krishna Over a year ago

@Priyabrata - can you please create a jsfiddle reproducing the issue?

Venkata Krishna Over a year ago

@Priyabrata - use $(document).. see updated answer.

Priyabrata Over a year ago

Difficult to do a JSFiddle, for I need to create the rows dynamically with data.

Shawn · Accepted Answer · 2014-04-17 19:42:58Z

1

This should address the second part of your request.

$('.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); });

answered Apr 17, 2014 at 19:42

Shawn

788 bronze badges

Collectives™ on Stack Overflow

Assigning onClick to Dynamic Buttons with JQuery

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related