jQuery not able to set cursor inside newly added empty span

Question

I am trying to set the cursor inside a empty span that I append, but it's not working. I did check out this question How to set the cursor inside a newly added empty span with Javascript (in a contenteditable div)?, But it didn't help me out

This is my code:

 <script>

    var app = angular.module('myApp',[]);
    app.controller('editor',function($scope){

    $scope.FontSize = function(start, end) 
                      {
                          var size = [];
                          for (var i = start; i <= end; i++) {
                                 size.push(i);
                          }
                            return size;
                      };                    

     $scope.changeFont = function()
                         {
                               $("#content").append("<span  id='one' style='font-size:"+$scope.kys_selected_font +"px' >  </span>");                                                                                
                               $("#one").focus();
                          };    
   });

</script> 

I am able to set focus when i have text inside span, but not when it's empty.

Answer 1

Maybe you change code like this:

 $scope.changeFont = function() {

      var spanNode = $("<span  id='one' style='font-size:" + $scope.kys_selected_font + "px' >  </span>");
      $("#content").append(spanNode);
      spanNode.focus();

  };