Clickable table row with button when clicking button triggers both

Question

I have a table that is dynamically created. Each table row has onclick implemented.

Here is my piece of code for creating table rows:

foreach ($db_response as $row) {
        echo '<tr onclick="open_edit_task_modal(this)" id="row-' . $row['id'] . '" ';
        if (Status::is_in_progress(intval($row['status']))) {
            echo 'class="table-warning"';
        } else if (Status::is_finished(intval($row['status']))) {
            echo 'class="table-success"';
        }
        echo '>';

        echo '<th scope="row">' . $row['id'] . '</th>';
        echo '<td>' . $row['street'] . '</td>';
        echo '<td>' . $row['phone'] . '</td>';
        echo '<td>' . format_date($row['date']) . '</td>';
        echo '<td>' . $row['price'] . '</td>';
        echo '<td>' . $row['comment'] . '</td>';
        echo '<td>' . $row['operator'] . '</td>';
        echo '<td>' . Status::get_status_name_by_id($row['status']) . ' / ';

        if (Status::is_unassigned(intval($row['status']))) {
            echo '<button type="button" class="btn btn-primary btn-sm" onclick="update_task_status(this)">Accept</button>';
        } else if (Status::is_in_progress(intval($row['status']))) {
            $db_response = DB::select_user_by_id(intval($row['worker_id']));

            if ($db_response['name'] === $_SESSION['name'] && $db_response['surname'] === $_SESSION['surname']) {
                echo '<button type="button" class="btn btn-success btn-sm" onclick="update_task_status(this)">Finish</button>';
            } else {
                echo $db_response['name'] . ' ' . $db_response['surname'];
            }
        }

        echo '</td>';
        ...

As you can see my <tr> has onclick which is called open_edit_task_modal(). And my button that is positioned on that same <tr> has onclick which is called update_task_status().

Everything works with button clicking and row clicking, no complaints there.

The only problem that I have is that when I click button the <tr> is also clicked so I am getting both onclicks triggered.

I would like to avoid that behavior. I currently have no idea how I can achieve such thing, please help.

Does this answer your question? [How to stop event propagation with inline onclick attribute?](https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) — El_Vanja, Nov 30 '20 at 21:41

a55 · Answer 1 · 2020-11-30T22:25:59.803

1

You can use a javascript variable as flag, like

stop_tr = 0;


function open_edit_task_modal(_this){
    if(stop_tr == 0){
        // your code ...
    }
}


function update_task_status(_this){
    stop_tr = 1;// stop runinng open_edit_task_modal function
    setTimeout("stop_tr=0;", 2000);// = 2sec , set flag back
    // your code ...
}

or use jQuery events with not selector instead of onclick attributes

$("#table_id .btn.btn1").on("click",function(){
    // which add 'btn1' class on your button too
    alert("button1 clicked");
});

$("#table_id tr").not('.btn').on("click",function(){
    // run your tr event without all buttons
    alert("tr clicked");
});

edited Nov 30 '20 at 22:25

answered Nov 30 '20 at 21:51

a55

376
3
13

I am not fan of `flag` solution. I would use the `jQuery` one but, unfortunately my `table_id` is dynamic and can be different depending on the table that the row is clicked in. What I ended up using was something as simple as `event.stopPropagation();` before my onclick as per this post: https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute which was suggested by @El_Vanja Thank you for you help anyway. – Vitaliy-T Dec 01 '20 at 08:59
i suggest you to use a same class for all of tables, then control it like `$(".mytables .btn.btn1").` and `$(".mytables tr").not('.btn').` – a55 Dec 01 '20 at 10:41

Clickable table row with button when clicking button triggers both

1 Answers1