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 onclick s triggered.

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

Answer 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");
});