Jquery 嵌套 div 数据表点击事件

Jquery nested div datatable click event

这是我的第一个 post,因为我通常可以通过 Google 和 StackExchange 站点轻松找到问题的答案(或类似答案)。但是,我已经尝试研究各种方法,但我没有找到满足我想要做的事情的方法。希望比我聪明的人可以帮助我解决这个问题。

我的主页有一个 "InitiativeContainer" DIV。此 DIV 将内容加载到子 DIV 容器 ListDetailsInitiativeDetails 中。这些子容器是加载到子 DIV 中的单独页面,因此不会重新加载整个主页,只有这些内容容器。主页加载了填充的 ListDetails DIV 并且是一个单独的页面,其中包含一个名为 tblDetails 的数据表。我想获取在数据表中单击的行的 ID,并且 return 该 ID 作为父页面的变量,以便它可以传递到 InitiativeDetails 页面。

现在,我可以通过 getKeyValue 实现警报,但只有在点击 2 次之后。第一次点击什么都不做,但第二次和随后的点击在警报中提供 ID。 2 次点击对用户不友好,必须更正。就好像 ListDetails 容器没有被 "initialized" 或 "focus" 设置,第一次点击 initializes/sets 是 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>

问题是我在点击事件中嵌套了点击事件吗?如果是这样,我怎样才能更好地处理这个问题?除了更好的代码解决方案之外,我还希望了解我做错了什么。提前谢谢你。

#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>

看来您的方向是对的,点击处理程序的嵌套导致内部处理程序仅在外部点击处理程序触发后才被定义。第一次点击后,内部处理程序开始工作。