是什么让光标出现在文本框或动态文本框中？

Question

我有一个奇怪的问题，我点击左键时无法将光标放在动态文本框上。但如果我右键单击它然后再次单击，则光标会出现在它上面。我只是想了解这个光标在文本框中的显示方式？是因为左键点击时会发生焦点吗？我希望这个问题足够清楚。提前致谢

编辑：提起工作罚款。我不知道我的应用程序出了什么问题。

<div class="icon" id="icon">
<div class="gloss"></div>

$('.icon').on('click', function (event) {

 event.stopPropagation();

                  var attrId=$(this).attr('id');
                  var parentCloneId=$(this).parent().parent().attr("id");



                  if($(this).hasClass("selected"+attrId)) {
                     $(".pop"+attrId).slideFadeToggle(function() {

                          $("#"+attrId).removeClass("selected"+attrId);
                          $("#config"+attrId).children(".pop"+attrId).remove(); 

                     }); 
                  } else {

                      var selectOptions="";

                      selectOptions+='<option value="1">1</option>';
                       selectOptions+='<option value="2">2</option>';
                       selectOptions+='<option value="3">3</option>';
                       selectOptions+='<option value="4">4</option>';
                      alert(4);
                      $(this).addClass("selected"+attrId).parent().append('<div id="pop' + attrId + '" class="messagepop pop' + attrId + '"><form id="new_message" action="/messages"><p><label for="definedStream">Please select the stream</label>'+
                                '<select name="selectedStreamsId' + attrId + '" id="selectedStreamsId' + attrId + '"><option value="-1">--SELECT--</option>'+selectOptions+
                                '</select></p>'+
                                '<p></p><input type="button" value="Save" name="saveStream' + attrId + '" id="saveStream' + attrId + '"/></div></form>');


                        $(".pop"+attrId+"").click(function(event) {

                        event.stopPropagation();


                    });

                  }




});

检查链接 Fiddle