Question

我有一个表，其中表行正在通过我的ajax返回。

Ajax调用/返回

$("#searchButton").click(function(){
    var lastName = $('#lastName').val();
    var data = {
      action: 'mysearch',
      post_lastName: lastName
    };
    $.post(
        the_ajax_script.ajaxurl,
        data,
        function(response)
        {
            $("#searchResults").append(response);
        }
    );
    return false;
});

显示搜索结果的HTML文件

<div class="retained intake_content">
        <table id="searchResults" style="width:80%">

        </table>
</div>
        <style>
            #searchResults tr:hover {
                background-color: orange;
                cursor: pointer;
            }
        </style>

我的php用于从SQL检索信息并回显创建的表格行。

while($row = $stmt ->fetch(PDO::FETCH_ASSOC)){
        $firstName = $row['first_name'];
        $lastName = $row['last_name'];
        $id = $row['id'];

        echo '<tr><td>' . $firstName .'</td><td>' . $lastName . '</td><td>' . $id .'</td><td><button type="button" id="personid" name="rowId" value="' . $id  . '"> View</button></td></tr>';
    }

我的测试是否点击按钮。

$("#personid").click(function(){

    //var id =$(this).val();
    console.log("Clicked");
    alert('Row has been clicked');
});

我添加了一个id为rowsid的按钮，目的是使用JQuery .click（）事件将ID发送到另一个ajax调用以检索更详细的信息。问题是我无法让JQuery .click（）发出警报。然后我尝试了如果console.log可以工作而它没有。

所以我猜猜.append（）有很多与这个问题或我回应表的方式有关吗？任何帮助将不胜感激。

BTW这是一个wordpress插件......

Answer 1

personid冲突我认为，有多个按钮的id属性是'personid'。尝试 $( "#searchResults tr td button[name='rowId']" ).on( "click", function() { console.log( $( this )); });

Answer 2

我建议您在按钮中使用class属性，因为HTML文档中的重复ID不正确。

试试这个：

<table><tr><td>some</td><td><button class='btn' value='1'></button></td></tr></table>

<script>
    $(".btn").click(function(){
        console.log($(this).val());
    })
</script>

Answer 3

这将有效：

$("#personid").live('click', function(){
    //var id =$(this).val();
    console.log("Clicked");
    alert('Row has been clicked');
});

Answer 4

<强> HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="jquery-ui-1.11.4.js"></script>
        <title>Dialog</title>
        <script type="text/javascript">

            $('document').ready(function(){   
                $('#search').click(function(){
                    $.get( 'table.php' ,function(data) {
                        $('#tb').append(data);
                    });
                    return false;
                });

                $('#tb').on('click','tr',function(){
                    alert($(this).attr('personID'));
                })
            });
        </script>
    </head>
    <body>
        <style>
           table,tr,td{ border:1px solid #000;border-collapse:collapse;}
        </style>
        <table id="tb">

        </table>
        <a href="#" id="search">Search</a>
    </body>
</html>

<强> PHP

<?php
echo '<tr personID="1"><td>1</td><td>2</td></tr>';
echo '<tr personID="2"><td>3</td><td>4</td></tr>';
?>

JQuery .click（）没有处理来自ajax的附加内容

4 个答案: