Jquery nested div datatable click event

Question

This is my first post as I usually find answers (or similar ones) to my questions easily via Google and StackExchange sites. However, I've tried researching various methods, but I am not finding one that meets what I am trying to do. Hopefully someone smarter than me can help me figure this out.

My main page has a "InitiativeContainer" DIV. This DIV loads content into sub DIV containers ListDetails and InitiativeDetails . These sub containers are separate pages loaded into the sub DIVs so that the entire main page is not reloaded, only these content containers. The mainpage loads with the ListDetails DIV populated and is a seperate page with a DataTable named tblDetails. I want to grab the ID of the row that is clicked on in the Datatable, and return that ID as a variable to the parent page so that it can be passed to the InitiativeDetails page.

Right now, I can achieve an alert with getKeyValue , but only after 2 clicks. The 1st click does nothing, but the second and following clicks provide the ID in an alert. The 2 clicks is not user friendly and has to be corrected. It is as if the ListDetails container is not being "initialized" or the "focus" set and the first click initializes/sets the focus of the DIV and the second click does what it is supposed to. Code Below:

Main Page snippet:

<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 page Snippet:

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

Is the issue that I have a nested click event inside of a click event? If so how could I handle this better? I am looking to understand what I am doing wrong in addition to a better code solution. Thank you in advance.

Answer 1

The #tblDetail tbody tr click handler should be defined outside of your ListDetails click handler. That is likely causing the click-twice issues.

I don't see what the ListDetails handler is supposed to be doing, maybe we can just omit that and have the end of your code snippet look something like this:

    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>

It seems you were on the right track, the nesting of click handlers caused the inner handler to be defined only after the outer click handler had fired. After the first click, the inner handler starts working.