为什么此点击功能只能使用一次？

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);
    }); 
});