Question

我正在从远程数据库下载一个表但是当我这样做时，我遇到了在表中的行上实现双击功能的问题。我可以在整个表上执行双击功能，尽管只使用像$('#t01').dblclick(function(){这样的表的id。我认为这是因为我在服务器端为表生成html文本。我尝试使用我在客户端完全创建的EditTable上的函数，它工作正常。有谁知道如何解决这个问题？任何帮助将不胜感激！

html代码：

<section class="main-section" id="service"><!--main-section-start-->
    <div class="container">
        <h2>Mapping</h2>


        <div data-role="content">
            <table id="t01">
            </table>

            <br>
            <br>
            <button data-role="button" id="upload">Upload</button>

            <table id="EditTable">
                <tr>
                    <td>1</td><td>One</td>
                </tr>
                <tr>
                    <td>2</td><td>Two</td>
                </tr>
            </table>

        </div>
    </div>
</section>

JavaScript代码：

var trackID = new Array();
function onBodyLoad() {

$.ajax({
  type: 'GET',
  url: 'http://ec2*******************compute.amazonaws.com/downloadAdmin.php',
  success: function (data) {
    // document.getElementById("tblDiv").innerHTML = data;
     var trackID=data.split(" ") ;
     //alert(data);
     printDatabase(trackID);
  }
});

}

function printDatabase(trackID){
        var tblText='<table style="width:100%"><tr><th style="text-align:center">Recent Journeys</th></tr>';
            var len = trackID.length;
            for (var i = 0; i < len; i++) {
                tblText +='<tr id="\''+trackID[i]+'\'"><td style="text-align:center">' 
                + trackID[i] +'</td></tr>';

            }
            tblText +="</table>";
            document.getElementById("t01").innerHTML =tblText;
}


  $(document).ready(function() {
$('#t01 tr').dblclick(function(){
alert('Row dblclicked');
});
});

Answer 1

确保在创建元素之后发生双击初始化的代码。它在身体负荷之后是不够的 - 你的AJAX在那时还没有回来。

点击

$('#t01 tr').dblclick(function(){
   alert('Row dblclicked');
});

在AJAX成功函数中调用PrintDatabase（）函数之后。

Answer 2

请替换

$('#t01 tr').dblclick(function(){
  alert('Row dblclicked');
});

使用

$(document).on("dblclick","#t01 tr",function() {
  alert('Row dblclicked');
});

要捕获在声明事件侦听器之后创建的元素上的事件 - 您应该绑定到父元素或层次结构中较高的元素。您的表是在页面加载完成后动态创建的，而jQuery并不知道它。

jQuery双击不在表行上工作

2 个答案: