调用函数

Question

所以我对jQuery世界很陌生，在编写一个简单的代码时面临一个我无法找到解决方案的问题。 首先，有一个函数可以根据索引更新下拉列表中表单的位置。 然后还有另一个函数，当在下拉列表中选择新位置时，它将改变页面上表单的位置：

  $(document).ready(initialRank);
  
  function initialRank() {
        var itemIndex = $(".template-detail-field").length;
        $('.field-rank').each(function () {
            $(this).empty();
            var pos = $(".field-rank").index($(this))+1;
            for (var i = 1; i <= itemIndex; i++) {
                if (i == pos) $(this).append('<option value="'+ i +'" selected>' + i + '</option>');
                else $(this).append('<option value="' + i + '">' + i + '</option>');
            }  
    });
    }

    $(document).on("change", ".field-rank", function () {
        $(".template-detail-field").each(function () {
            var sel = $(this).find(".field-rank").val();
            var pre = $(".template-detail-field").eq(sel - 1);
            $(this).insertBefore(pre);  
        });
        initialRank();
            }
        });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="template-detail-field">
<p> Testing stuff 1 </p>
<select class="field-rank"> 
<option value="1" selected>1</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 2 </p>
<select class="field-rank"> 
<option value="2" selected>2</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 4 </p>
<select class="field-rank"> 
<option value="4" selected>4</option>

如您所见，在更改位置后，我调用函数initialRank（），以便相应地更新每个表单的显示位置。问题是在我这样做之后，下拉列表将不接受任何输入，并且我的意思是当我在列表上选择新位置时，表单不会改变其位置，也不会选择新选择的位置。 / p>

但是当我在change（）函数中重写initialRank（）代码时，一切正常：

 $(document).ready(initialRank);
 
  function initialRank() {
        var itemIndex = $(".template-detail-field").length;
        $('.field-rank').each(function () {
            $(this).empty();
            var pos = $(".field-rank").index($(this))+1;
            for (var i = 1; i <= itemIndex; i++) {
                if (i == pos) $(this).append('<option value="'+ i +'" selected>' + i + '</option>');
                else $(this).append('<option value="' + i + '">' + i + '</option>');
            }  }); 
  }
  
 $(document).on("change", ".field-rank", function () {
        $(".template-detail-field").each(function () {
            var sel = $(this).find(".field-rank").val();
            var pre = $(".template-detail-field").eq(sel - 1);
            $(this).insertBefore(pre);  
        });
        var itemIndex = $(".template-detail-field").length;
        $('.field-rank').each(function () {
            $(this).empty();
            var pos = $(".field-rank").index($(this)) + 1;
            for (var i = 1; i <= itemIndex; i++) {
                if (i == pos) $(this).append('<option value="' + i + '" selected>' + i + '</option>');
                else $(this).append('<option value="' + i + '">' + i + '</option>');    
            }
        });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="template-detail-field">
<p> Testing stuff 1 </p>
<select class="field-rank"> 
<option value="1" selected>1</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 2 </p>
<select class="field-rank"> 
<option value="2" selected>2</option>
</select>
</div>

<div class="template-detail-field">
<p> Testing stuff 4 </p>
<select class="field-rank"> 
<option value="4" selected>4</option>

有人可以向我解释我做错了什么。 谢谢。