Why the success alert message is appearing many times in an AJAX call made to a PHP script in following scenario?

Question

Following are two code blocks, each one is responsible for AJAX call to a PHP file onclick of respective hyperlink:

<script language="javascript" type="text/javascript">

    $(".fixed").click(function(e) { 
        var action_url1 = $(this).attr('delhref');
        var qid = $(this).data('q_id');


        $(".fixed").colorbox({inline:true, width:666});

        $("#fixedPop_url").click(function(event) {
          event.preventDefault();
          $.get(action_url1, function(data) {
            alert("Question status updated successfully");
            $("#fix_"+qid).hide();
            $("#notfix_"+qid).show();
          });      
        });       

        $(".c-btn").bind('click', function(){
          $.colorbox.close();
        });
      });

      $(".notfixed").click(function(e) { 
        var action_url2 = $(this).attr('delhref');
        var qid = $(this).data('q_id');


        $(".notfixed").colorbox({inline:true, width:666});

        $("#notfixedPop_url").click(function(event) {
          event.preventDefault();
          $.get(action_url2, function(data) {
            alert("Question status updated successfully");
            $("#notfix_"+qid).hide();
            $("#fix_"+qid).show();
          });       
        });
        $(".c-btn").bind('click', function(){
          $.colorbox.close();
        });
      });
    </script>

Now the PHP code snippet from a file is written below to which the AJAX request is made. Actually, the PHP file name to which the AJAX request is going and the parameters passed required are contained in variables action_url1 and action_url1. These are working fine. Until now there is no issue for me. Also the PHP code is working fine.

<?php
    $objQuestionIssue = new QuestionIssue;
    $op       = $_GET['op'];   

    switch( $op ) {
            case "fixed":
                $que_issue_data = $objQuestionIssue->UpdateQuestionIssueStatus($question_id, $op);

                die();          
                break;

            case "notfixed":
              $que_issue_data = $objQuestionIssue->UpdateQuestionIssueStatus($question_id, $op);

                die();          
                break;      
        } 
    ?>

But the issue I'm facing is getting the alert success message multiple times. It is expected to show the alert message only once but in current scenario it's showing multiple times. Can anyone hep me in correcting this issue please?

Answer 1

You have nested click handlers -

Every time you click on .fixed you are binding a new click handler on #fixedPop_url. And that is why your .get is executing multiple times

you can use .off() to fix this -

$("#fixedPop_url").off('click').on('click',function(event) {