如何正確分配jQuery事件處理程序？

Question

我仍在學習如何使用AJAX，因此會在此處顯示新手代碼...

我得到了這個div（將其自身作為復選框的列表重復顯示）：

<div class="updateTask fs11">
  <input type="checkbox" name="taskStatusRadio" id="taskStatus" value="<?php echo $taskId; ?>" <?php echo $done; ?> > 
  <?php _e('Task Done', 'sagive'); ?>
</div>

這將激活：

jQuery(function($){
    $('.updateTask').click(function () {

        $.post(ajax_object.ajaxurl, {
            action: 'action_update_task',
            task_id: $("input[name=taskStatusRadio]:checked").map(function () {return this.value;}).get()

        }, function(data) {

            // USE DATA RETURNED //////////
            var $response   = $(data);
            var message     = $response.filter('div#message').html();
            var taskid      = $response.filter('div#taskid').html();        

            // SUCCESS RESPOND //////////
            setTimeout(function(){
                $('#success ul li').append(message + taskid);
                $('#success').fadeIn();
                $('#success').css("display", "block");              
            }, 1000);   

            setTimeout(function(){
                $('#success ul li').empty();
                $('#success').fadeIn();
                $('#success').css("display", "none");               
            }, 30000);


            hideTask = "#" + taskid;
            $(hideTask).hide("slow");

            hideTask = '';

        });
    });
});

並使用以下php文件：

wp_enqueue_script( 'ajax-update-task', get_stylesheet_directory_uri().'/ajaxLoops/ajax-update_task.js', array('jquery'), 1.0 ); // jQuery will be included automatically
wp_localize_script( 'ajax-update-task', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl

add_action( 'wp_ajax_action_update_task', 'ajax_update_task' ); // ajax for logged in users
function ajax_update_task() {

    global $current_user;
    get_currentuserinfo();
    $task_user = $current_user->display_name;
    if($taskUser == '') {$taskUser = $current_user->user_login;}

    $task_id = $_POST["task_id"];
    $task_id = $task_id[0];
    $task_status = 'done';
    $task_title = get_the_title($task_id);
    $task_title = mb_substr($task_title, 0 ,35).'...';

    update_post_meta($task_id, '_sagive_task_radio_selector', $task_status);
    update_post_meta($task_id, '_sagive_task_user_changed', $task_user);

    echo '<div id="message">'.__('The task: ', 'sagive').$task_title.__('Was Marked Completed!', 'sagive').'</div>';
    echo '<div id="taskid">'.$task_id.'</div>';

    die(); // stop executing script
}

第一次一切都很好。 但是，第一個復選框之后我標記的第二個復選框按預期消失了，什么也沒做。 它不會激活php腳本，並且不會返回響應。

由於我仍然是使用AJAX的新手，因此，我希望使用我的代碼提供一個示例，或者提供一個很好的示例進行說明。

修訂1：
這是復選框所在頁面的結構

Answer 1

我認為您的問題來自選擇器：

$("input[name=taskStatusRadio]:checked").map(function () {return this.value;}).get();

它返回所有已選中的taskStatusRadio輸入，而不僅僅是您單擊的那個。
您的php腳本會接收所有檢查在數組中的taskid，然后選擇第一個對待它並發送響應。
所以第一次沒關系，您只選中了一個復選框。 但是，當您選中第二個復選框時，將發送所有選中的taskid，並且僅處理$_POST["task_id"][0] 。
來自您的php腳本的響應相同，並且前視圖沒有變化。

因此，我認為，您只需要修改一點代碼，只發布您單擊它的復選框的taskid。

jQuery(function($) {
    // we listen only the checkbox, not the div click action
    $(':checkbox', '.updateTask').click(function () {
        // if the checkbox is checked
        if ($(this).attr('checked') == "checked") {

            $.post(ajax_object.ajaxurl, {
                  action: 'action_update_task',
                  task_id: $(this).val() }, 
                  function(data) {

                      // SUCCESS RESPOND //////////
                      setTimeout(function() {
                          $('#success ul li').append( $(data).html());
                          $('#success').fadeIn();
                          $('#success').css("display", "block");              
                          }, 1000);   

                      setTimeout(function() {
                          $('#success ul li').empty();
                          $('#success').fadeIn();
                          $('#success').css("display", "none");               
                          }, 30000);

                      // we hide the checkbox
                      $(this).hide("slow");
             });
         }
     });
 });

由於前端javascript中的這一更改，我們必須像這樣簡化您的php腳本：

wp_enqueue_script( 'ajax-update-task', get_stylesheet_directory_uri().'/ajaxLoops/ajax-update_task.js', array('jquery'), 1.0 ); // jQuery will be included automatically
wp_localize_script( 'ajax-update-task', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl

add_action( 'wp_ajax_action_update_task', 'ajax_update_task' ); // ajax for logged in users
function ajax_update_task() {

    global $current_user;
    get_currentuserinfo();
    $task_user = $current_user->display_name;
    if($taskUser == '') {$taskUser = $current_user->user_login;}

    $task_id = $_POST["task_id"];
    $task_status = 'done';
    $task_title = get_the_title($task_id);
    $task_title = mb_substr($task_title, 0 ,35).'...';

    update_post_meta($task_id, '_sagive_task_radio_selector', $task_status);
    update_post_meta($task_id, '_sagive_task_user_changed', $task_user);

    //  Note : now we send the message directly well-formed with the task_id
    echo __('The task: ', 'sagive').$task_title.__('Was Marked   Completed!', 'sagive'). $task_id;

    die(); // stop executing script
}

希望我的回答能解決您的問題;）

ps：我為我的英語不好道歉...