Question

这是我的第一篇文章，因为我通常可以通过Google和StackExchange网站轻松找到问题的答案（或类似问题）。但是，我尝试过研究各种方法，但我找不到符合我要做的方法。希望比我聪明的人可以帮助我解决这个问题。

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

现在，我可以通过getKeyValue获得提醒，但只需点击2次即可。第一次单击不执行任何操作，但第二次和后续单击会在警报中提供ID。 2次点击不是用户友好的，必须予以纠正。好像ListDetails容器没有被初始化＆＃34;或者＃34;焦点＆＃34;设置，第一次单击初始化/设置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

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

似乎你在正确的轨道上，点击处理程序的嵌套导致只有在外部点击处理程序被触发后才能定义内部处理程序。第一次单击后，内部处理程序开始工作。

Jquery嵌套div数据表单击事件

1 个答案: