How to remove a certain onClick event and add another

[Nathan]

I have the following jquery/ajax:

<!--Task jQuery/Ajax Call-->
<script>
    function markcomplete(taskid,projectid)
    {

        $.ajax({
            url : 'submit.php', // give complete url here
            type : 'post',
            data : { taskid : taskid, projectid : projectid, submittype : 7},
            success: function (data) {
                // returns from server on success
                console.log(data);
                $('#task'+taskid).addClass('closed').removeClass('open');
            },
            failure: function (error) {
                // returns here on error
                console.log(data);
            }
        });
    }

    function marknotcomplete(taskid,projectid)
    {
        $.ajax({
            url : 'submit.php', // give complete url here
            type : 'post',
            data : { taskid : taskid, projectid : projectid, submittype : 8},
            success: function (data) {
                // returns from server on success
                console.log(data);
                $('#task'+taskid).addClass('open').removeClass('closed');
            },
            failure: function (error) {
                // returns here on error
                console.log(data);
            }
        });
    }
</script>

It works with the php/html:

<li id="task'.$tasks['id'].'" class="open" onClick="markcomplete('.$tasks['id'].','.$projectid.')">
                                    <span style="margin-left:40px;"/>'.
                                    $tasks['task_name'].'</span>
                                  </li>

and

<li id="task'.$tasks['id'].'" class="closed" onClick="marknotcomplete('.$tasks['id'].','.$projectid.')">
                                    <span style="margin-left:40px;"/>'.
                                    $tasks['task_name'].'</span>
                                  </li>

How on success of the ajax can I just change the onClick event function from marknotcomplete to markcomplete and vise versa?

[Nathan]

Here we go.

 

PHP/HTML:

<li id="task'.$tasks['id'].'" class="open" data-taskid="'.$tasks['id'].'" data-projectid="'.$projectid.'">

Script:

<script type="text/javascript">

        function toggleFunction(taskid, projectid, submittype)
        {
            $.ajax({
                url : 'submit.php', // give complete url here
                type : 'post',
                data : { taskid : taskid, projectid : projectid, submittype : submittype},
                success: function (data) {
                    // returns from server on success
                    console.log(data);
                    // below jQuery statement will toggle between 2 classes - open & closed
                    $('#task'+taskid).toggleClass('open closed');
                },
                failure: function (error) {
                    // returns here on error
                    console.log(data);
                }
            });
        }

        $(document).ready(function(e){

            $('li[id^=task]').click(function(e){

                var taskid = $(this).data("taskid");
                var projectid = $(this).data("projectid");

                if ($(this).hasClass('open'))
                    submittype = 7;
                else 
                    submittype = 8;
                
                toggleFunction(taskid, projectid, submittype);
            });
        });

 </script>