2016-12-03 13 views
0

は私が手に捕捉されない例外TypeErrorを(...)未定義のプロパティ '分割' を読み込めません:キャッチされない例外TypeError:

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

ここ

は私のjqueryのコードです(...)未定義の 'スプリット' プロパティを読み取ることができません。ここに私のHTMLコードは、現在'margin-top:10px;margin-right:10px;'が$ value変数に保存されたデータベース内の値は、

<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> 

$値が保存されています。

なぜ、$ umargin.find( '.tk-margin-value')のval()がコンソールログで未定義で、なぜこのエラーが発生するのか理解できません "Uncaught TypeError:未定義(...)」

+0

$(this)の値があなたを誤解している可能性があります。イベントハンドラで$(this)の値をチェックしましたか?イベントのバブリングのために、あなたが考えている要素ではないかもしれません。あなたが期待している価値を返すのでしょうか? – Hendeca

+0

@Hendeca console.log($(this))//結果> [div.tk-margin-valuesコンテキスト:div.tk-margin-valuesセレクタ: ""] [div.tk-margin-valuesコンテキスト:div。 tk-margin-valuesセレクタ: ""] –

+0

@Hendecaはい、あなたは正しいです、私は2ブロックを見つけました。私はもう1つのclass .tk-margin-valueを持っています。ただ名前を変更しました。 –

答えて

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

working fiddle fiddle link

+0

間違って$ htmlを削除しないと、すべてのhtmlブロックが表示されます。 $ htmlは問題ではありません。私はこれを使って同じエラーが発生しましたif($( '。tk-margin-values')。length) –

+0

これを確認してください。その作業は現在https://jsfiddle.net/gnanavelr/70vwp8Lp/ – vel

+0

イベントハンドラ '$ this'をデバッグした後、' $ this'がhtmlファイル内に別の '.tk-margin-class'をフェッチしました。私は今クラス名を変更しました。 –

関連する問題