javascript - 未捕获的类型错误 : Cannot read property 'split' of undefined(…)

Question

我收到 Uncaught TypeError: Cannot read property 'split' of undefined(...)

这是我的 jquery 代码:

( function( $ ) {
    "use strict";

    $('.tk-input').on('change', function(e){
    var $umargin = $(this).parent();
    var temp = '';
    $umargin.find('.tk-input').each(function(input_index, input){
        var margin_property = $(input).attr('data-property');
        var input_value = $(input).val();
        if(input_value != '')
        {
            if(input_value.match(/^[0-9]+$/))
                input_value += 'px';
            temp += 'margin-'+margin_property+':'+input_value+';';

        }
    });
    $umargin.find('.tk-margin-value').val(temp);
});
$('.tk-margin-values').each(function(index, element){
    var $umargin = $(this);
    var tk_margin_value = $umargin.find('.tk-margin-value').val();
    console.log( $umargin.find('.tk-margin-value').val() );
    if(tk_margin_value != '')
    {

        var vals = tk_margin_value.split(';');

        $.each(vals, function(i,vl){
            if(vl != '')
            {
                var splitval = vl.split(':');
                var margin_value = splitval[1];
                var param = splitval[0].split('-');
                var margin_property = param[1];
                $umargin.find('.tk-input').each(function(input_index, input){
                    var input_margin_property = $(input).attr('data-property');
                    if(margin_property == input_margin_property)
                        $(input).val(margin_value);
                });
            }
        })
    }
});

} )( jQuery );

这是我的 HTML 代码

<div class="tk-margin-values">
                    <input name="tk_margin_top" data-property="top" class="value-margin-top tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ) .'_field" type="text" value="' . esc_attr( $top_val ) . '">
                <input name="tk_margin_right" data-property="right" class="tk-value-margin-right tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ) .'_field" type="text" value="' . esc_attr( $right_val ). '">

                <input name="tk_margin_bottom" data-property="bottom" class="tk-value-margin-bottom tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ).'_field" type="text" value="'. esc_attr( $bottom_val ).'">

                <input name="tk_margin_left" data-property="left" class="tk-value-margin-left tk-input '. esc_attr( $settings['param_name'] ) .' '. esc_attr( $settings['type'] ).'_field" type="text" value="' . esc_attr( $left_val ). '">';

    //$pieces = array( $margin_property, $top_val, $right_val, $bottom_val, $left_val );
    //$values   = implode( '||', $pieces );
    <input type="text" name="'. esc_attr( $settings['param_name'] ) .'" class="tk-margin-value wpb_vc_param_value wpb-input '. esc_attr( $settings['param_name'] ).' '. esc_attr( $settings['type'] ) .'_field" value="'. esc_attr( $value ) .'" '. $dependency .' />';     

    </div>

$value 是数据库中保存的值，当前 'margin-top:10px;margin-right:10px;' 保存在 $value 变量中。

我不明白为什么 $umargin.find('.tk-margin-value').val() 是控制台日志中未定义的原因以及为什么会出现此错误“Uncaught TypeError: Cannot read property 'split' of undefined (……)”

Answer 1

已更新

现在可以使用

或者您可以检查 if ($('.tk-margin-values').length)) 长度，如下所示

        $(document).ready(function(){
            "use strict";

            $('.tk-input').on('change', function(e){
            var $umargin = $(this).parent();
            var temp = '';
            $umargin.find('.tk-input').each(function(input_index, input){
                var margin_property = $(input).attr('data-property');
                var input_value = $(input).val();
                if(input_value != '')
                {
                    if(input_value.match(/^[0-9]+$/))
                        input_value += 'px';
                    temp += 'margin-'+margin_property+':'+input_value+';';

                }
            });
            $umargin.find('.tk-margin-value').val(temp);
        });

        if ($('.tk-margin-values').length) {
            $('.tk-margin-values').each(function(index, element){
                var $umargin = $(this);
                var tk_margin_value = $umargin.find('.tk-margin-value').val();
                console.log( $umargin.find('.tk-margin-value').val() );
                if(tk_margin_value != '')
                {

                    var vals = tk_margin_value.split(';');

                    $.each(vals, function(i,vl){
                        if(vl != '')
                        {
                            var splitval = vl.split(':');
                            var margin_value = splitval[1];
                            var param = splitval[0].split('-');
                            var margin_property = param[1];
                            $umargin.find('.tk-input').each(function(input_index, input){
                                var input_margin_property = $(input).attr('data-property');
                                if(margin_property == input_margin_property)
                                    $(input).val(margin_value);
                            });
                        }
                    })
                }
            });
        }
        } );

工作 fiddle fiddle link