如何在模式 bootstrap 中单击行 table？

Question

我在 table 中绑定了数据并以模式 bootstrap 显示它们。我想使用单击或双击获取第 table 行的数据，但它不起作用

   <div class="modal-body">
                <table id="table_search" class="table table-hover">
                    <thead>
                        <tr>
                            <td>CCA</td>
                            <td>Name</td>
                        </tr>
                    </thead>
                    <tbody>  
                    </tbody>
                </table>
            </div>

而我使用jquery如下

 $('#table_search > tbody > tr').click(function () {
            alert( $(this).val());
        });

        $('#table_search > tbody > tr').dblclick(function () {
            alert($(this).val());
        });

但它不起作用。

Answer 1

问题在于 "click" 甚至在元素存在之前就对其进行了绑定。在将行添加到 DOM 后，您必须重新绑定，或者使用 "on":

将父结构绑定到任何子选择器

 $('#table_search > tbody').on('click', '>tr', function () {
        alert( $(this));
    });

    $('#table_search > tbody').on('dblclick', '>tr', function () {
        alert($(this));
    });

Answer 2

我认为您应该在此处使用事件委托或附加事件当显示模态时。另外 tr 没有您想要的值 text

$(document).on('click dblclick', '#table_search > tbody > tr', function (e) {
   alert($(this).text());
});

Answer 3

这是一个有效的 fiddle。其他人先于我提出了解决方案的核心。我基本上在 fiddle.

中综合了他们的答案

https://jsfiddle.net/stephen_hartzell/seapkzvv/

HTML

<div class="modal-body">
            <table id="table_search" class="table table-hover">
                <thead>
                    <tr>
                        <td>CCA</td>
                        <td>Name</td>
                    </tr>
                </thead>
                <tbody>  
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                </tbody>
            </table>
        </div>

Javascript

$('#table_search > tbody').on('click', '>tr', function () {
     alert( $(this).text());
});


$('#table_search > tbody > tr').dblclick(function () {
    alert($(this).text());
});

如何在模式 bootstrap 中单击行 table？

How do click row table in modal bootstrap?

javascript

jquery

html-table

modal-dialog

twitter-bootstrap