jQuery用/图像替换复选框，新的复选框AJAX功能不再起作用？

Question

我正在使用ScrewDefaultButtons jQuery 插件来替换带有图像的复选框。该插件使用以下代码成功隐藏复选框并将其替换为选中/未选中的图像：

$('input:checkbox').screwDefaultButtons({ 
    image: "url(../../images/radio_check.png)",
    width:   14,
    height:  14
});

我遇到的问题是在尝试将这些自定义复选框与使用复选框将项目标记为已完成的待办事项列表插件结合使用时出现的。当一个项目完成时，复选框被勾选，该项目通过 PHP 和 AJAX 移动到“已完成项目”列表中。

上面的代码成功地替换了默认复选框W /自定义图像，但勾选新复选框时，除了“未选中的”图像更改为“已选中”图像之外不会发生任何内容。使用默认复选框，会弹出一个警报，确认您是否要移动项目，如果确认，则移动项目。

最大的问题是：如何使用我的待办事项列表的复选框功能让螺丝默认按钮复选框工作？

这是复选框的代码：

默认复选框的输出：

<td id="checkbox_parent">
    <input id="ctdl-1852" class="todo-checkbox uncompleted" type="checkbox"></input>
    <input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>

ScrewDefaultButton 复选框的输出：

<td id="checkbox_parent">
    <div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px"> … </div>
    <input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>

PHP：

protected function show_checkbox( $id, $completed = NULL, $layout = 'table', $single = '' ) {
    $permission = CTDL_Lib::check_permission( 'todo', 'complete' );
    if ( $permission === true ) {
        if ( is_admin() || $layout == 'table' ) $this->list .= '<td id="checkbox_parent">';
        if ( $completed == 1 ) {
            $this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox completed'.$single.'" checked="checked" />', esc_attr( $id ) );
        } else {
            $this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox uncompleted'.$single.'" />', esc_attr( $id ) );
        }
        $cleverness_todo_complete_nonce = wp_create_nonce( 'todocomplete' );
        $this->list .= '<input type="hidden" name="cleverness_todo_complete_nonce" value="'.esc_attr( $cleverness_todo_complete_nonce ).'" />';
        if ( is_admin() || $layout == 'table' ) $this->list .= '</td>';
    }
}

jQuery:（注意：添加.bind("click", function () { 不能解决问题）

$( '.todo-checkbox' ).click( function () {
    var confirmed = confirm( ctdl.CONFIRMATION_CHECK );
            if ( confirmed == false ) return false;
    var status = 1;
    var id = $( this ).attr( 'id' ).substr( 5 );
    var todoid = '#todo-' + id;
    var single = $ ( this ).hasClass( 'single' );
    if ($( this ).prop( 'checked' ) == false ) status = 0;

    var data = {
        action: 'cleverness_todo_complete',
        cleverness_id: id,
        cleverness_status: status,
        _ajax_nonce: ctdl.NONCE
    };

    jQuery.post( ctdl.AJAX_URL, data, function( response ) {
        if ( single != true ) {
                    $( todoid ).fadeOut( function () {
                        $( this ).remove();
                    });
            $( '.todo-checkbox' ).prop( "checked", false );
        }
    } );
} );

编辑（2013 年 7 月 28 日）：输出 Hauke 的第一个代码：

<td id="checkbox_parent">
  <div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px; cursor: pointer; background-position: 0px 0px;"> … </div>
  <input type="hidden" value="a81d045af8" name="cleverness_todo_complete_nonce"></input>
</td>

当复选框被点击时，输出的唯一区别是背景位置的高度变为-14px。

Answer 1

ScrewDefaultButtons 在实际 input 元素周围创建一个包装 HTML 元素。因此，在 click 事件处理程序中使用 this 时，不能依赖 input 元素。相反，您必须先找到input 元素。您可以通过执行以下操作来完成此操作：

var inputElement;
if( $( this ).is( 'input' ) )
    inputElement = $( this );
else
    inputElement = $( this ).children().first();

找到 inputElement 后，就可以得到它的id 等等：

var id = inputElement.attr( 'id' ).substr( 5 );   
var todoid = '#todo-' + id;
var single = inputElement.hasClass( 'single' );
if (inputElement.prop( 'checked' ) == false ) status = 0;

为了测试这一点，我在这里创建了一个小的 jsFiddle：http://jsfiddle.net/Q8s96/3/

---

编辑：在 jsFiddle 中我没有处理这一行：

$( '.todo-checkbox' ).prop( "checked", false );

您必须将其替换为首先检测是否将ScrewDefaultButtons 应用于复选框的内容。如果已应用，则必须更改其第一个子项的 checked 属性。如果没有应用，可以直接更改checked属性。

类似这样的：

$( '.todo-checkbox' ).each( function () {
    if( $( this ).is( "input" ) )
        $( this ).prop( "checked", false );
    else
        $( this ).children().first().prop( "checked", false );
});

Answer 2

尝试用$(document).on("click", '.todo-checkbox', function { 替换$( '.todo-checkbox' ).click( function () {（假设你有jQuery 1.7+）：

$(document).on('click', '.todo-checkbox', function {
    var confirmed = confirm( ctdl.CONFIRMATION_CHECK );
            if ( confirmed == false ) return false;
    var status = 1;
    var id = $( this ).attr( 'id' ).substr( 5 );
    var todoid = '#todo-' + id;
    var single = $ ( this ).hasClass( 'single' );
    if ($( this ).prop( 'checked' ) == false ) status = 0;

    var data = {
        action: 'cleverness_todo_complete',
        cleverness_id: id,
        cleverness_status: status,
        _ajax_nonce: ctdl.NONCE
    };

    jQuery.post( ctdl.AJAX_URL, data, function( response ) {
        if ( single != true ) {
                    $( todoid ).fadeOut( function () {
                        $( this ).remove();
                    });
            $( '.todo-checkbox' ).prop( "checked", false );
        }
    } );
} );