如何在模态引导程序中单击行表？

Question

我已将数据绑定到表中并在模态引导程序中显示它们。 我想通过点击或双击获取行表的数据，但它不起作用

   <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

问题是＆＃34;点击＆＃34;在元素存在之前绑定元素。在将行添加到DOM之后，您必须重新绑定，或者使用＆＃34; on＆＃34;将父结构绑定到任何子选择器：

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

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

Answer 2

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

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

Answer 3

这是一个工作小提琴。其他人让我成为解决方案的核心。我基本上将他们的答案组合在一起。

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());
});