php - 如何使用 ajax 更新 img src？

Question

用户点击链接，这是一个空复选框的图像。这是我的 HTML：

<a href="" class="completeTask" id="<?php echo $task->id ?>" name="taskStatus">
<img src="<?php echo ( $task->complete == 1 ) ? "/images/task-checkbox-filled.png" : "/images/task-checkbox-empty.png" ?>" class="task-checkbox" />
</a>

.js 脚本被称为：

$( function() {

 $( ".completeTask" ).click( function() {

    var taskID = $( this ).attr( "id" );
    var name = $( this ).attr( "name" );
    var data = "taskID=" + taskID;
    var parent = $( this );
    var image = $( ".task-checkbox" );

    if ( name == "completeTask" ) {

        $.ajax( {

            type: "POST",
            url: "/scripts/completeTask.php",
            data: data,
            cache: false,

            success: function( imageSource ) {
                image.attr( 'src', imageSource );
            }
        } );
    }

    return false;
} );
} );

completeTsk.php 返回的结果是图片路径和文件名：

    //Return image path and filename
    if ( $task->complete == 1 )
        echo "/images/task-checkbox-filled.png";
    else
        echo "/images/task-checkbox-empty.png";

    exit;

我的预期结果是加载了已填充复选框的新图像，但是当用户单击原始空复选框时，图像消失了。