Question

我让Jquery从db读取数据，当我点击列表时，它会在详细信息框中显示roe数据。但是....问题：我在显示内容的地方制作div。我用Jquery加载页面到div。但是当我这样做时，行点击不起作用。我无法理解为什么。它是shild元素，但是当我使用getElementById它应该接受当前行但是没有时，我正在知道它。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<?php include './config/init.php'; ?>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Biisilista</title>
        <script src="./js/jquery-3.2.1.js"></script>
        <link href="css/basic.css" rel="stylesheet" type="text/css">
    </head>
    <body>

        <h1>KaraokeBiisit </h1>
        <div id="edit" style="display:none">

            <div> 
                <form name="formedit" method="post" action="">
                    <table id="edittable" border="1" cellspacing="2" cellpadding="1">

                        <tbody>
                            <tr>
                                <td>
                                    <label>Nimi:</label>
                                </td>
                                <td>
                                    <input id="nimi" name="nimi" placeholder="Kappaleen nimi" type="text">
                                </td>
                                <td>
                                    <label>Levy:</label>
                                </td>
                                <td>
                                    <input id="levy" name="levy" placeholder="Levyn tunnus" type="text" width="10px">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>Artisti:</label>
                                </td>
                                <td>
                                    <input id="artisti" name="artisti" placeholder="Kappaleen esittäjä" type="text">
                                </td>
                                <td>
                                    <label>Kieli:</label>
                                </td>
                                <td>
                                    <input id="kieli" name="kieli" placeholder="Alkuperäiskieli" type="text" width="20">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>Numero:</label>
                                </td>
                                <td>
                                    <input id="numero" name="numeron" placeholder="Numero" type="text">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>


        </div>



        <div id="pageContent">

        </div>



        <script src="./js/jquery-3.2.1.js"></script>

        <script src="./js/script.js"></script>
    </body>

</html>

jQuery(document).ready(function ($) {

    $("#pageContent").click(function () {
            $('tr').removeClass('selected');
            $(this).addClass('selected');
            var selectedRow;
            selectedRow = $(rivi);
            var td = $(selectedRow).children('td');
            $('#nimi').val(td[0].innerText);
            $('#artisti').val(td[1].innerText);
            $('#levy').val(td[2].innerText);
            $('#kieli').val(td[3].innerText);
            $('#numero').val(td[4].innerText);
            console.log("test");
        
    

    });
    $(".clickable-row").on('click', () => {
        $('#edit').show();
    });
    $('#pageContent').load('container.php');
//    $('#pageContent').load('biisit.php');
});
function showBiisit() {
    console.log("Näytetään sisältö");
    $('#pageContent').load('container.php');
}

<?php include './config/init.php'; ?>


<?php
//luodaan tietokantaobjekti
$db = new DataBase();

// tehdään kysely
$db->query("SELECT * FROM kappaleet");
//query("SELECT `id`,`nimi`,`artisti`,`levy`,`kieli`,`numero` FROM `kappaleet`;");
//yhdistetään hakutulokseen
$kappaleet = $db->resultset();
?>

<table  id="dataTable">

            <tr>

                <th>Nimi</th>
                <th>Artisti</th>
                <th width="100" align="left">Levy</th>
                <th width="100" align="left">Kieli</th>
                <th width="100" align="left">Numero</th>

            </tr>
       
     

<?php foreach ($kappaleet as $biisi): ?> 
    <tr class='clickable-row' >
        <td><?php echo $biisi->nimi ?></td>
        <td><?php echo $biisi->artisti ?></td>
        <td><?php echo $biisi->levy ?></td>
        <td><?php echo $biisi->kieli ?></td>
        <td><?php echo $biisi->numero ?></td>
    </tr>
<?php endforeach; ?>
</table>

Answer 1

试试这个

...
$("body").on('click', '.clickable-row', function () { //i change this line
    $('tr').removeClass('selected');
    $(this).addClass('selected');
    var selectedRow = $(this);
    //selectedRow = $(rivi); idk what is this
    var td = selectedRow.children('td');
    $('#nimi').val(td[0].innerText);
    $('#artisti').val(td[1].innerText);
    $('#levy').val(td[2].innerText);
    $('#kieli').val(td[3].innerText);
    $('#numero').val(td[4].innerText);
    console.log("test");
});
...

获取类元素

1 个答案: