Jquery function not work with php echoing code

Question

I'm new to php.
I want to use jquery to delete a table row from php echoing code, but it doesn't work. Here is my html code:

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

and here is my php code:

<?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>";
}
?>

When I press the 'delete' button, it doesn't work.
I don't know why it doesn't work:(

j08691 · Accepted Answer · 2013-12-08 05:49:22Z

2

It looks like your data is loaded dynamically when the show button is clicked. If so, you need to use .on() instead of .click(), and .on()'s delegated event syntax. Change your delete button code to:

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

answered Dec 8, 2013 at 5:49

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joachim Isaksson Over a year ago

+1, although going up to $('#result') may be enough in this case.

Ashish Jain · Accepted Answer · 2013-12-08 06:09:42Z

0

I have corrected ur code just check it,

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

answered Dec 8, 2013 at 6:09

Ashish Jain

7701 gold badge8 silver badges24 bronze badges

Collectives™ on Stack Overflow

Jquery function not work with php echoing code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related