JQuery.on() 点击侦听器未按预期工作

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(function(){

    console.log('here1');

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

        console.log('here2');

    });

 })

最终代码：

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

Answer 2

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

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

Answer 3

尝试以下：

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

或

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

希望对您有所帮助。

JQuery.on() 点击侦听器未按预期工作

JQuery.on() click listener not working as expected

ajax

jquery

onclick

event-handling

jquery-events