Question

您好我尝试点击表格行。

我的问题是当我点击该行时没有任何反应。

当我将鼠标放在行上时，光标确实会发生变化。

我的代码：

<?php

session_start();

 if(isset($_SESSION[user_id]) == false || empty($_SESSION[user_id]))
  {
    header("Location: ***************");
    exit();
  }

header('Content-Type: text/html; charset=UTF-8');

if(isset($_POST[logOut]))
{
    session_destroy();

    header("Location: *************");

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<link rel="stylesheet" type="text/css" href="styles.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){

  $('.row').click(function () {

  alert("click!");

  });

});

</script>

<script src="functions.js"></script>

<form action="" method="POST">

<input type="submit" name="logOut" value="Logout"> 

</form>

</head>

<body id="login-bg"> 

<div id="table_show">

<div class ="action_button_search" id="test">

<button type="button" onclick="getUsers()">Show users</button>

<br>

<div class="search_user">

<div class ="send_message_panel">

<textarea name="message" id="message">Enter message here...</textarea>
<br>
<button type="button" onclick="sendMessage()">Send message</button>

</div>

</div>

</div>

</div>


</body>
</html>

表格创建代码：

使用Javascript：

function getUsers()
{
    var xmlhttp;

    xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {



    parent = document.getElementById("table_show");

    var element = document.getElementById("table_container");

    var test = document.getElementById("test");

    if(element != null)
     { 
    element.parentNode.removeChild(element);
    }

    var table = document.createElement('table');
    table.innerHTML = xmlhttp.responseText;
    table.id = "table_container";
    table.className = "table_container";
    table.border = 1;

    table.appendChild(test)

    parent.insertBefore(table, parent.firstChild);

    }
  }

xmlhttp.open("POST","get_gym_users.php",true);
xmlhttp.send();

}

PHP代码：

<?php


header('Content-Type: text/html; charset=UTF-8');

$mysqli = new mysqli(*********************);

  $mysqli->set_charset("utf8");

   $sql = "SELECT id, user_name, status, last_time_seen, first_name, last_name, gender, age, gcm_id FROM user"; 

    $stmt = $mysqli->prepare($sql);

    $stmt->execute();

    $stmt->store_result();

    $stmt->bind_result($id, $user_name, $status, $last_time_seen, $first_name, $last_name, $gender, $age, $gcm_id);

    echo '<tr>
        <th>User name</th>
        <th>status</th>
        <th>Last time seen</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Gender</th>
        <th>Age</th>
    </tr>';


    while ($stmt->fetch()) 
    {
        $gcmIdArray[] = $gcm_id;

        echo '<tr class="row" id="'.$id.'" ><td>'.$user_name.'</td><td>'.$status.'</td><td>'.$last_time_seen.'</td><td>'.$first_name.'</td><td>'.$last_name.'</td><td>'.$gender.'</td><td>'.$age.'</td></tr>';
    }






?>

CSS：

.row
{

cursor: pointer;

}

Answer 1

您需要在此处使用event delegation，因为您的行已动态添加到DOM：

$('body').on('click','.row', function() {

});

事件委派将帮助您将click事件附加到这些新创建的tr元素

您需要将jQuery代码包装在自己的<script>标记中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){

  $('.row').click(function () {

  alert("click!");

  });

});
</script>

Answer 2

尝试替换

parent.insertBefore(table, parent.firstChild);

带

parent.insertBefore(table, parent.firstChild);
$('.row').click(function () {
    alert("click!");
});

在JavaScript中

....

jQuery - click事件未触发

2 个答案: