javascript - Jquery嵌套div数据表点击事件

Question

这是我的第一篇文章，因为我通常可以通过 Google 和 StackExchange 网站轻松找到问题的答案(或类似答案)。然而，我尝试过研究各种方法，但没有找到符合我想做的事情的方法。希望比我聪明的人能帮我解决这个问题。

我的主页有一个“InitiativeContainer” DIV。此 DIV 将内容加载到子 DIV 容器 ListDetails 和 InitiativeDetails 中。这些子容器是加载到子 DIV 中的单独页面，因此不会重新加载整个主页，仅重新加载这些内容容器。主页加载了填充的 ListDetails DIV，并且是一个带有名为 tblDetails 的 DataTable 的单独页面。我想获取数据表中单击的行的 ID，并将该 ID 作为变量返回到父页面，以便可以将其传递到 InitiativeDetails 页面。

现在，我可以使用 getKeyValue 实现警报，但只能在点击 2 次之后才能实现。第一次单击不会执行任何操作，但第二次及后续单击会在警报中提供 ID。两次点击对用户来说并不友好，必须予以纠正。就好像 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>

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>

问题是我在点击事件中嵌套了点击事件吗？如果是这样，我该如何更好地处理这个问题？除了更好的代码解决方案之外，我还希望了解我做错了什么。预先感谢您。

Answer 1

#tblDetail tbody tr 点击处理程序应在 ListDetails 点击处理程序之外定义。这可能会导致点击两次问题。

我不明白 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>

看来您走在正确的轨道上，单击处理程序的嵌套导致只有在外部单击处理程序触发后才定义内部处理程序。第一次单击后，内部处理程序开始工作。