Question

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

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

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

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

最大的问题是：如何使用我的待办事项列表的复选功能使ScrewDefaultButtons复选框工作？

这是复选框的代码：

输出默认复选框：

<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元素。因此，在this事件处理程序中使用input时，您不能依赖click作为必需input元素。相反，您必须先找到var inputElement; if( $( this ).is( 'input' ) ) inputElement = $( this ); else inputElement = $( this ).children().first();元素。您可以通过执行以下操作来实现此目的：

id

找到inputElement后，您可以获取其var id = inputElement.attr( 'id' ).substr( 5 ); var todoid = '#todo-' + id; var single = inputElement.hasClass( 'single' ); if (inputElement.prop( 'checked' ) == false ) status = 0;等等：

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

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

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

checked

你必须用首先检测是否将ScrewDefaultButtons应用于复选框的内容替换它。如果已应用，则必须更改其第一个孩子的checked属性。如果未应用，则可以直接更改$( '.todo-checkbox' ).each( function () { if( $( this ).is( "input" ) ) $( this ).prop( "checked", false ); else $( this ).children().first().prop( "checked", false ); });属性。

这样的事情：

{{1}}

Answer 2

尝试用$( '.todo-checkbox' ).click( function () {替换$(document).on("click", '.todo-checkbox', 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 );
        }
    } );
} );

jQuery用/ image替换复选框，新复选框的AJAX功能不再有效？

2 个答案: