Question

我有一个jquery脚本，它将标准复选框标记转换为我的自定义样式复选框。问题是点击功能只能工作一次。复选框仅在第一次单击时更改。我不确定是什么导致了这个问题...

$(document).ready(function(){
    $(this).find('input[type="checkbox"]').each(function(){
        var cbName = $(this).prop('name');
        var cbValue = $(this).prop('value');
        var cbInput = '<input type="hidden" name="'+cbName+'" value="'+cbValue+'">';

        if($(this).is(':checked')){
            var cbDivision = '<div class="jqCheckbox checked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'">'+cbInput+'</div>';
        } else {
            var cbDivision = '<div class="jqCheckbox unchecked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'"></div>';
        }   
        $(this).prop('outerHTML', cbDivision);
    });
    $('div[class^="jqCheckbox"]').on('click', function(){
        var cbName = $(this).data('cb-name');
        var cbValue = $(this).data('cb-value');
        var cbInput = '<input type="hidden" name="'+cbName+'" value="'+cbValue+'">';
        if($(this).hasClass('checked')){
            var cbDivision = '<div class="jqCheckbox unchecked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'"></div>';
        } else {
            var cbDivision = '<div class="jqCheckbox checked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'">'+cbInput+'</div>';
        }
        $(this).prop('outerHTML', cbDivision);
    }); 
});

Answer 1

在动态创建这些元素时，使用document代替this并使用$(document).on：

$(document).ready(function(){
    // here use document instead of this
    $(document).find('input[type="checkbox"]').each(function(){
        var cbName = $(this).prop('name');
        var cbValue = $(this).prop('value');
        var cbInput = '<input type="hidden" name="'+cbName+'" value="'+cbValue+'">';

        if($(this).is(':checked')){
            var cbDivision = '<div class="jqCheckbox checked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'">'+cbInput+'</div>';
        } else {
            var cbDivision = '<div class="jqCheckbox unchecked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'"></div>';
        }   
        $(this).prop('outerHTML', cbDivision);
    });

    // here use $(document).on()
    $(document).on('click','div[class^="jqCheckbox"]', function(){
        var cbName = $(this).data('cb-name');
        var cbValue = $(this).data('cb-value');
        var cbInput = '<input type="hidden" name="'+cbName+'" value="'+cbValue+'">';
        if($(this).hasClass('checked')){
            var cbDivision = '<div class="jqCheckbox unchecked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'"></div>';
        } else {
            var cbDivision = '<div class="jqCheckbox checked" data-cb-name="'+cbName+'" data-cb-value="'+cbValue+'">'+cbInput+'</div>';
        }
        $(this).prop('outerHTML', cbDivision);
    }); 
});

为什么这个点击功能只能工作一次？

1 个答案: