Jquery函数不能与php回显代码一起使用

时间:2013-12-08 05:46:11

标签: php jquery

我是php的新手 我想使用jquery从php回显代码中删除一个表行,但它不起作用。 这是我的HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>test insert</title>
<script src="jquery-2.0.3.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $('.del').click(function(){
        $(this).parent().parent().fadeOut('slow');
    });

    $('#show').click(function(){
        $.post('data.php',{action: "show"},function(res){       
            $('#result').hide().html(res).fadeIn('slow');   
        });     
    });
});
</script>
</head>
<body>
   <h2>Show Data</h2>
   <button id="show">Show</button>
   <p>Result:</p>
   <div id="result"></div><br>
</body>
</html>

这是我的PHP代码:

<?php
//connect to db
$con = mysql_connect('localhost','root');
$db = mysql_select_db('test');
//if show key is pressed show records
if($_POST['action'] == 'show'){
    $sql   = "select * from customer order by Firstname";
    $query = mysql_query($sql);

    echo "<table><tr><th>Firstname</th><th>Lastname</th><th>Keynumber</th>
    <th>Number2</th><th>Number3</th><th>Option</th><th><button class='del' >delete</button></th></tr>";
    while($row = mysql_fetch_array($query)){
        echo "<tr><td>$row[firstname]</td><td>$row[lastname]</td><td class='key'>$row[keynumber]</td>
        <td>$row[number2]</td><td>$row[number3]</td><td><button class='del' >delete</button></td></tr>";
    }
    echo "</table>";
}
?>

当我按下“删除”按钮时,它不起作用 我不知道为什么它不起作用:(

2 个答案:

答案 0 :(得分:1)

单击show按钮时,您的数据似乎是动态加载的。如果是,则需要使用.on()代替.click()和.on()的delegated event syntax。将删除按钮代码更改为:

$(document).on('click', '.del', function(){
    $(this).parent().parent().fadeOut('slow');
});

答案 1 :(得分:0)

我已经更正了你的代码,只需检查一下,

<script type="text/javascript">
$(document).ready(function(){
    $('.del').click(function(){
        $(this).parent().parent().fadeOut('slow');
    });

    $('#show').click(function(){
        $.post(
         url:'data.php',
         data:{action: "show"},
         type:'POST',
         function(res){       
            $('#result').hide().html(res).fadeIn('slow');   
        });     
    });
});

</script>