Explore our sites

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

When i click next butoon of index.php, jquery performs its work, alert and loads the content of check.php in div 'result'.

But, Now when i again click on next button nothing happens, no alert, why ? I want that-alert should be displayed again and jquery should be load check.php as done on first click. Here is my code:

This is index.php

<?php
session_start();
?>
<html>
<head>
    <script src="js/jquery-1.3.2.js"></script>
    <script> 
    $(document).ready(function()
    {
            $("button[name='next']").click(function() //when button clicked
            {
                var count= $('button[name=next]').val();      //value of button
                alert('button clicked');
                    $.ajax(
                    {url:"check.php",type: "POST",data: 'count='+ count,success:function(result)
                                                {
                                                        $("#result").html(result);
                                                }
                    });
            });             
    });
   </script>
</head>
<body>
    <?php   $_SESSION['count']='0'; ?>      
    <div id="result">
        <button name="next" value="<?php echo ($_SESSION['count']);?>">Next</button>
    </div>
</body>
</html>

This is check.php

<?php
  session_start();
  $_SESSION['count']=$_POST['count']+1;
?>
<button name="next" value="<?php echo ($_SESSION['count']);?>">Next</button>
share|improve this question
 
possible duplicate of Events triggered by dynamically generated element are not captured by event handler –  Felix Kling Jan 18 at 7:04
 
Also check learn.jquery.com/events/event-delegation, and you really should use the latest jQuery version. –  Felix Kling Jan 18 at 7:04
 
Try and id instead of name. –  Bharat soni Jan 18 at 7:39
add comment

3 Answers

up vote 1 down vote accepted

try something like this

     $("#result").on('click',"button[name='next']",function(){
        //.... your code goes here
     }

Reason : Click event you applied on the button is replaced by new button which does not have click event bind to it.

Solution :

  1. Apply click event on new created [dynamically created] . see above code [on() function in jquery]
  2. Don't replace button,only replace your content.
share|improve this answer
add comment
up vote 0 down vote

When you just want to update the val() of $('button[name=next]') , You could echo the value from php file and update it, instead of rewriting the button tag every time.

I would prefer doing this way

$.ajax({
    url:"check.php",
    type: "POST",
    data: 'count='+ count,
    success:function(result){
         $('button[name=next]').val(result);
        // $("#result").html(result);
    }
});

PHP

 <?php session_start();
       $_SESSION['count']=$_POST['count']+1;
       echo $_SESSION['count'];
share|improve this answer
add comment
up vote 0 down vote 
$(document).on('click',"button[name='next']",function()

this should work

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.