Why Jquery script not execute after first time button click?

Question

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>

possible duplicate of [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) — Felix Kling, Jan 18 '14 at 07:04
Also check http://learn.jquery.com/events/event-delegation/, and you really should use the latest jQuery version. — Felix Kling, Jan 18 '14 at 07:04

rajesh kakawat · Accepted Answer · 2014-01-18T07:23:40.247

1

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 :

Apply click event on new created [dynamically created] . see above code [on() function in jquery]
Don't replace button,only replace your content.

edited Jan 18 '14 at 07:23

answered Jan 18 '14 at 07:19

rajesh kakawat

10,330
1
18
38

score 0 · Answer 2 · answered Jan 18 '14 at 07:13

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'];

score 0 · Answer 3 · answered Jan 18 '14 at 07:37

0

$(document).on('click',"button[name='next']",function()

this should work

answered Jan 18 '14 at 07:37

Faytraneozter

765
2
9
17

Why Jquery script not execute after first time button click?

3 Answers3