Question

我有以下HTML结构：

<table class="table table-hover js-integrations js-radio-rows">
    <thead>
        <tr>
            <th></th>
            <th>Title</th>
            <th>Owner</th>
            <th>Modified Date</th>
        </tr>
    </thead>
    <tbody>
        <!-- Start load by ajax -->
            <tr class="clickable">
                <td class="js-integration-option">
                    <input type="radio" value="20" name="integration_id" class="pseudo-radio sr-only">
                    <label class="icon-lg" for="http-radio"></label>
                </td>
                <td>
                    <img align="absmiddle" src="imglocation" />
                    Some Title
                    <span class="file-size">
                        (50kb)
                    </span>
                </td>
                <td>
                    Owner Le Own
                </td>
                <td>
                    Date
                </td>
            </tr>
        <!-- End load by ajax -->
    </tbody>
</table>

我有这个jQuery。

jQuery(document).ready(function(){
    console.log('here1');
    jQuery('.js-radio-rows').on('click', 'tr', function() {
        console.log('here2');
    });
});

当我点击可点击的行时，console.log('here2')不会触发。我有什么想法，我做错了什么？可能是因为行是由ajax加载的吗？调用文档就绪后很久就会发生这种情况，因为它取决于单击的其他内容。

Answer 1

如果document.ready事件中没有.js-radio-rows表，则不起作用。尝试将document设置为活动的代表：

jQuery(document).on('click', '.js-radio-rows tr', function() {
    console.log('here2');
});

Answer 2

尝试以下：

$(document).ready(function () {
    console.log('here1');            
    $('.js-radio-rows tr').on('click', function () {
        console.log('here2');
    });
});

OR

$(document).ready(function () {
    console.log('here1');            
    $(document).on('click', '.js-radio-rows tr', function () {
        console.log('here2');
    });
});

希望这会对你有所帮助。

Answer 3

试试这个：

$(document).ready(function(){

    console.log('here1');

    $('.js-radio-rows').on('click', 'tr', function() {

        console.log('here2');

    });

 })

最终代码：

＆＃13;

<html>
    <title>This is test</title>
    <head>
        <style>   
        </style>
    </head>
    <body>
        
        <table class="table table-hover js-integrations js-radio-rows">
    <thead>
        <tr>
            <th></th>
            <th>Title</th>
            <th>Owner</th>
            <th>Modified Date</th>
        </tr>
    </thead>
    <tbody>
        <!-- Start load by ajax -->
            <tr class="clickable">
                <td class="js-integration-option">
                    <input type="radio" value="20" name="integration_id" class="pseudo-radio sr-only">
                    <label class="icon-lg" for="http-radio"></label>
                </td>
                <td>
                    <img align="absmiddle" src="imglocation" />
                    Some Title
                    <span class="file-size">
                        (50kb)
                    </span>
                </td>
                <td>
                    Owner Le Own
                </td>
                <td>
                    Date
                </td>
            </tr>
        <!-- End load by ajax -->
    </tbody>
</table>
       

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
$(document).ready(function(){
    
    console.log('here1');
    
    $('.js-radio-rows').on('click', 'tr', function() {
        
        console.log('here2');
        
    });
      
 })
        </script>
    </body>
</html>

＆＃13;

JQuery.on（）单击侦听器未按预期工作

3 个答案: