Jquery click is not working on dynamically added table tr via PHP

Question

I am getting data from my database and displaying it on my HTML via php echo. Now I need to put a click function on specific tr with id breakrow, but this click function is not working. I am using .on function as suggested in documentation for dynamically added content. Also I dont see any error in console also. Here is the sample code. (When I add same code directly into html page, its working as expected)

PHP Part:

echo '<div class="container" id="container">
        <table class="gridtable" id="tableMain">
            <thead>
                <tr class="tableheader">
                  <th>customer</th>
                  <th>product</th>
                  <th>thedate</th>
                  <th>value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="breakrow"><td>customer 01</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>

                <tr class="breakrow"><td>customer 02</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 02</td><td>product 01</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 02</td><td>product 02</td><td>30 10 2017</td><td>974.57</td></tr>


                <tr class="breakrow"><td>customer 03</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 03</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 03</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 03</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>

            </tbody>
        </table>
    </div>';

Jquery:

$( document ).ready(function() {

    $('#tableMain').on('click', 'tr.breakrow',function(){
        $(this).nextUntil('tr.breakrow').slideToggle(200);
    });
});

can someone guide me how to resolve this ?

_Suggetsion:_ Don't output large chunks of HTML using echo. End the PHP block using `?>`, write your HTML and then astart the PHP-block again, if needed, using ` — M. Eriksson, Jan 16 '19 at 12:13

score 5 · Accepted Answer · answered Jan 16 '19 at 12:04

5

When loading content using ajax the script needs to bind the dynamically added content so you can use below script which can take effect on dynamically loaded data.

$(document).on('click', 'tr.breakrow', function(){
    $(this).nextUntil('tr.breakrow').slideToggle(200);
});

answered Jan 16 '19 at 12:04

Yogendrasinh

895
1
8
23

: Thanks, its working – acr Jan 16 '19 at 12:07
@acr You are welcome :) – Yogendrasinh Jan 16 '19 at 12:07

score 1 · Answer 2 · answered Jan 16 '19 at 12:05

your click function is not working because jQuery is running on client side and php is running on server side so when the script executed it will not find the particular ID because the table is rendering via php.

This is done by event delegation. Event will bind on wrapper-class element but will be delegated to selector-class element. This is how it works.

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

Note: wrapper-class element can be anything ex. document, body or your wrapper. Wrapper should already exist.

score 1 · Answer 3 · answered Jan 16 '19 at 13:26

When adding the dynamic content or add other elements after the window loaded or any ajax data, In this condition static click $(element).click(function(){}) is't work, You must bind the target element with document, Here the example:

$(document).on('click', 'your target element', function(){
    //your code here......
});

_ - - - - - - _

Thank you

_ - - - - - - _

score 0 · Answer 4 · answered Jan 16 '19 at 12:16

You do not need to pass second argument on click event.working code is as per below.Here i just alert on click,you have to put your custom code in place of alert.

$( document ).ready(function() {
    $('#tableMain tr.breakrow').on('click',function(){
       alert('toggle');
     });
});

Click Here for working example in jsfiddle.

Jquery click is not working on dynamically added table tr via PHP

4 Answers4