Javascript Jquery嵌套的div数据表单击事件

这是我的第一篇文章，因为我通常通过谷歌和StackExchange网站很容易找到我问题的答案（或类似的答案）。然而，我已经尝试过研究各种方法，但我没有找到一种符合我所尝试的方法。希望比我聪明的人能帮我解决这个问题

我的主页有一个

“InitiativeContainer”

DIV。该DIV将内容加载到子DIV容器

ListDetails

和

InitiativeDetails

。这些子容器是加载到子div中的独立页面，因此不会重新加载整个主页，只加载这些内容容器。主页加载时填充了ListDetails DIV，是一个单独的页面，其中包含一个名为tblDetails的数据表。我想获取Datatable中单击的行的ID，并将该ID作为变量返回到父页面，以便可以将其传递到InitiativeDetails页面

现在，我可以使用

getKeyValue

实现警报，但只需单击两次。第一次单击不起任何作用，但第二次和随后的单击会在警报中提供ID。2次点击对用户不友好，必须纠正。这就好像

ListDetails

容器没有被“初始化”或设置“焦点”，第一次单击初始化/设置DIV的焦点，第二次单击执行它应该执行的操作。代码如下：

主页片段：

<div class="InitiativeContainer">
    <div id="ListDetails"></div>
    <div id="InitiativeDetails"></div>
</div>  

<script type="text/javascript">         
    $(document).ready(function() {
        ListDetails.onload=ListLoad();
    });/*End (document).ready*/

</script>
<script>        
    function ListLoad() {
        var urlListDetails = './cfm/Initiative_List.cfm';
        var ListDetails = $('#ListDetails');
        $.ajax({
            beforeSend: function() {
                ListDetails.html('<b>Loading...</b>');
            },
            success: function(html) { 
                ListDetails.html(html); 
            }, 
            url: urlListDetails
        }); /*End Ajax*/
    }; /*End ListLoad*/

    ListLoad();

    function DetailLoad(InitiativeID) { 
        var InitiativeID = 1
        var urlInitiativeDetails = './cfm/Initiative_Info.cfm?InitiativeID=' + InitiativeID;
        var InitiativeDetails = $('#InitiativeDetails');
        $.ajax({
            beforeSend: function() {
                InitiativeDetails.html('<b>Loading...</b>');
            },
            success: function(html) { 
                InitiativeDetails.html(html); 
            }, 
            url: urlInitiativeDetails
        }); /*End Ajax*/
    } /*End DetailsLoad*/

    function getKeyValue(key){
        var keyValue = key
        alert('key Value: '+keyValue)
    }

    $('#ListDetails').on('click',function(event) {
        // Get project_key
         $('#tblDetail tbody tr').on('click',function(event){
            var k2 = $(this).find('td').first().text();
            event.stopPropagation();
            getKeyValue(k2);
            return false;
            });
            return false;
    });

</script>

$（文档）.ready（函数（）{
onload=ListLoad（）；
});/*结束（文件）。准备好了吗*/
函数ListLoad（）{
var urlListDetails='./cfm/Initiative_List.cfm'；
var ListDetails=$（“#ListDetails”）；
$.ajax({
beforeSend:function（）{
html（'Loading…'）；
},
成功：函数（html）{
html（html）；
}, 
url:urlListDetails
})；/*结束Ajax*/
}; /*结束列表加载*/
ListLoad（）；
函数详细信息加载（InitiativeID）{
var InitiativeID=1
变量urlInitiativeDetails='./cfm/Initiative_Info.cfm？InitiativeID='+InitiativeID；
var InitiativeDetails=$（“#InitiativeDetails”）；
$.ajax({
beforeSend:function（）{
html（'Loading…'）；
},
成功：函数（html）{
html（html）；
}, 
url:urlInitiativeDetails
})；/*结束Ajax*/
}/*结束详细信息加载*/
函数getKeyValue（键）{
var keyValue=key
警报（'键值：'+键值）
}
$（'#ListDetails'）。在（'click'，函数（事件）{
//获取项目密钥
$（'tblDetail tbody tr'）。在（'click'，函数（事件）{
var k2=$（this.find（'td'）.first（）.text（）；
event.stopPropagation（）；
getKeyValue（k2）；
返回false；
});
返回false；
});

Initiative_List.cfm页面片段：

<div id="ListDetails" align="center" style="width:100%;">
    <table id="tblDetail" class="title display compact cell-border dataTable_pointer" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>Prospect</th>
                <th>Status</th>
                <th>ClientType</th>
                <th>Effective</th>
                <th>Approved</th>
                <th>Consultant</th>
                <th>Audit Request</th>
                <th>Completed</th>
            </tr>
        </thead>
        <tbody>
            <cfoutput query="qryListDetails">
                <tr>
                    <td>#qryListDetails.ID#</td>
                    <td>#qryListDetails.Prospect#</td>
                    <td>#qryListDetails.ProspectStatus#</td>
                    <td>#qryListDetails.ClientType#</td>
                    <td>#dateFormat(qryListDetails.EffectiveDate,"yyyy-mm-dd")#</td>
                    <td>#qryListDetails.Approved#</td>
                    <td>#qryListDetails.Consultant#</td>
                    <td>#dateFormat(qryListDetails.AuditRequestDate,"yyyy-mm-dd")#</td>
                    <td>#qryListDetails.Completed#</td>
                </tr>
            </cfoutput>
        </tbody>
    </table>
</div>

身份证件
展望
地位
客户类型
有效的
经核准的
顾问
审计请求
完整的
#qryListDetails.ID#
#qryListDetails.Prospect#
#qryListDetails.ProspectStatus#
#qryListDetails.ClientType#
#dateFormat（qryListDetails.EffectiveDate，“yyyy-mm-dd”）#
#qryList详细信息。已批准#
#qryListDetails.顾问#
#dateFormat（qryListDetails.AuditRequestDate，“yyyy-mm-dd”）#
#qryList详细信息。已完成#

问题是我在单击事件中嵌套了一个单击事件吗？如果是这样的话，我怎样才能处理得更好？除了更好的代码解决方案外，我还希望了解我做错了什么。提前感谢。

应在列表详细信息单击处理程序之外定义

#tblDetail tbody tr

单击处理程序。这可能会导致两次单击问题

我不知道ListDetails处理程序应该做什么，也许我们可以忽略它，让代码片段的结尾看起来像这样：

    function getKeyValue(key){
        var keyValue = key
        alert('key Value: '+keyValue)
    }   

    $('#ListDetails').on("click", "#tblDetail tbody tr", function(event) {
       var k2 = $(this).find('td').first().text();
       event.stopPropagation();
       getKeyValue(k2);
       return false;
    }); 

</script>

函数getKeyValue（键）{
var keyValue=key
警报（'键值：'+键值）
}   
$（“#ListDetails”）。在（“单击”上，“#tbldeail tbody tr”，函数（事件）{
var k2=$（this.find（'td'）.first（）.text（）；
event.stopPropagation（）；
getKeyValue（k2）；
返回false；
}); 

看起来您的思路是正确的，单击处理程序的嵌套导致内部处理程序只有在外部单击处理程序启动后才被定义。第一次单击后，内部处理程序开始工作。

应在ListDetails单击处理程序之外定义

#tblDetail tbody tr

单击处理程序。这可能会导致两次单击问题

我不知道ListDetails处理程序应该做什么，也许我们可以忽略它，让代码片段的结尾看起来像这样：

    function getKeyValue(key){
        var keyValue = key
        alert('key Value: '+keyValue)
    }   

    $('#ListDetails').on("click", "#tblDetail tbody tr", function(event) {
       var k2 = $(this).find('td').first().text();
       event.stopPropagation();
       getKeyValue(k2);
       return false;
    }); 

</script>

函数getKeyValue（键）{
var keyValue=key
警报（'键值：'+键值）
}   
$（“#ListDetails”）。在（“单击”上，“#tbldeail tbody tr”，函数（事件）{
var k2=$（this.find（'td'）.first（）.text（）；
event.stopPropagation（）；
getKeyValue（k2）；
返回false；
}); 

看起来您的思路是正确的，单击处理程序的嵌套导致内部处理程序只有在外部单击处理程序启动后才被定义。第一次单击后，内部处理程序开始工作。

on（'click'，函数（事件）引用div容器#ListDetails）。此div