如何正确分配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:我为我可怜的英语道歉...