jQuery-单击事件未触发

Question

Hello I try to make my table rows click able. 您好，我尝试使我的表格行能够点击。

My problem is that when I click the row nothing happens. 我的问题是，当我单击该行时，什么也没有发生。

When I place my mouse over the row the cursor does change. 当我将鼠标放在行上时，光标确实发生了变化。

My code: 我的代码：

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

Table creating code: 表创建代码：

Javascript: 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();

}

The PHP code: 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: CSS：

.row
{

cursor: pointer;

}

Answer 1

You need to use event delegation here because your row has been added dynamically to the DOM: 您需要在此处使用事件委托 ，因为您的行已动态添加到DOM：

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

});

Event delegation will helps you to attach the click event to these newly created tr elements 事件委托将帮助您将click事件附加到这些新创建的tr元素

You need to wrap your jQuery code in its own <script> tag: 您需要将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

Try replacing 尝试更换

parent.insertBefore(table, parent.firstChild);

with 与

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

in JavaScript.... 在JavaScript中...

jQuery-单击事件未触发

问题描述

2 个解决方案

解决方案1
4 2014-03-03 06:47:05

解决方案2
2 已采纳 2014-03-03 06:55:04

jQuery-单击事件未触发

问题描述

2 个解决方案

解决方案1 4 2014-03-03 06:47:05

解决方案2 2 已采纳 2014-03-03 06:55:04

解决方案1
4 2014-03-03 06:47:05

解决方案2
2 已采纳 2014-03-03 06:55:04