javascript - JQuery stopPropogation with .on ('click' ) 绑定(bind)不工作

Question

我试图阻止按钮点击冒泡到表格行事件，但我似乎无法阻止它发生。

所以，基本上，我有一个表格行，它是可点击的，它会将您带到不同的屏幕。

我在行上有一个按钮，它执行下面的函数，并通过 AJAX 返回数据，并刷新页面。

这是我的按钮的 JQuery 函数:

$('#check_container').on('click', '.edit-risk-compliance', function(e) {

    e.preventDefault(); // tried this on its own, and together with below
    e.stopPropagation(); // tried this on its own, and together with below
    e.stopImmediatePropagation(); // tried this on its own, and together with below

    // capture course_id from clicked button
    var risk_type_id = $(this).attr('id');

    // change type 1 = exclude, change type 2 = include
    var change_type = $(this).data('id');

    $.ajax({
        type: "POST",
        url: base_url + 'risk/amend_risk_compliance',
        data: "risk_type_id=" + risk_type_id + "&change_type=" + change_type,
        success: function (data) {

            $('#check_container').html(data);

        }
    });

});

这里是点击行的函数:

$('#table_holder').on('click', '.risk_log_row', function() {
    // capture risk_type_id from clicked button
    var risk_type = $(this).attr('id');
    // redirect to controller to show privileges
    window.location = '/risk/manage_questions/' + risk_type;
});

这是我的 html:

    <div class="row" id="check_container">
        <div id='table_holder' class="col-md-12" >
            <table id="risk_log_table" class="sortable table table-striped tablesorter">                                        
                <thead>
                    <tr>
                        <th>Risk Assessment</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody> 
                    <tr id='4' class='risk_log_row clickable'>
                        <td data-title='Risk Assessment'>Agency Workers</td>
                        <td data-title='Actions'>
                            <div id='4' data-toggle='tooltip' title='Edit risk renewal period' class='edit-freq-btn btn risk-btns btn-info btn-sm'>Edit Renewal</div>
<div id='2' data-id='2' data-toggle='tooltip' title='Include in compliance' class='edit-risk-compliance btn btn-primary btn-sm'>In compliance?</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

Answer 1

更改将点击事件附加到按钮的方式，例如

$('.edit-risk-compliance').on('click',  function(e) {