JQuery的。点击()不工作的追加< TR>从阿贾克斯工作、LT、JQuery、阿贾克斯

2023-09-11 22:35:25 作者:高一七班他姓杨i

我所在的表行正在通过我的ajax回报.appended表。

I have a table where the table rows are being .appended through my ajax return.

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文件的形式显示搜索结果。

HTML file where the search results appear

<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的信息和呼应创建的表行。

And my php for retrieving the info from SQL and echoing the created table row.

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>';
    }

我的测试,看看是否被点击的按钮。

My test to see if the button was clicked.

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

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

我增加了一个按钮,rowsid与使用JQuery。点击()事件的ID发送到另一个AJAX调用来检索的详细信息的意图ID。问题是我不能让JQuery的。点击()通知所有。那么我想,如果将console.log的工作,它没有。

I added a button with the id of rowsid with the intention of using JQuery .click() event to send the ID to another ajax call to retrieve more detailed information. The problem is I can not get the JQuery .click() to alert at all. I then tried if console.log would work and it did not.

所以我猜.append()已经很多做这个问题,或者我呼应表的方式吗?任何帮助将大大AP preciated。

So I am guessing .append() has alot to do with this issue or the way I echoed the table? Any help would be greatly appreciated.

顺便说一句,这是在一个字preSS插件...

BTW this is in a wordpress plugin...

推荐答案

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>';
?>