내 javascript 파일의 jquery 함수가 호출되지 않습니다.

Question

내 ASP.NET MVC 응용 프로그램에서 Scripts 폴더 아래의 javascript 파일에 jquery 함수가있는 javascript 파일이 있습니다. 이 함수는 클릭 이벤트를 드롭 다운하는 것을 듣고 아래와 같이 선택된 값으로 텍스트 상자를 채 웁니다. 그러나 드롭 다운 옵션을 클릭하면이 메서드가 호출되지 않고 값이 텍스트 상자에 설정되지 않습니다. 디버거 (F12)로 실행할 때 디버거 명령 줄에 함수를 붙여 넣은 다음 드롭 다운을 클릭하면 작동합니다. !!!! 왜 메소드가 javascript 파일에서 등록되지 않았는지 모르겠습니다. 드롭 다운 메뉴 및 입력 텍스트 상자는 부트 스트랩 입력 그룹을 사용하여 작성됩니다. 드롭 다운은 처음에는 비어 있으며 setup() 함수에서 파일을 읽음으로써 채워집니다.

@section Scripts { 
    @Scripts.Render("~/scripts/test.js") 
} 

<div class="col-md-3"> 
    <div class="input-group"> 
     <input id="textBoxId" type="text" class="form-control" placeholder="Enter name" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
       <span class="caret"></span> 
      </button> 
      <ul id="dropdownlistId" class="dropdown-menu pull-right"></ul> 
     </div> 
    </div> 
</div> 

Answer 1

당신은 아직 존재하지 않는 요소에 결합하려고하는 문제로 실행 : 내 cshtml 파일에서

// In test.js 
var testMap = {} 

$(function() { 
    $("#dropdownlistId li a").click(function() { 
     var name = $(this).text(); 
     $("#textBoxId").val(name); 
    }); 
}); 

function setup() { 
    // Read name and value pair in testMap 
    ... 
    // Append names to drop down list 
    $.each(testMap, function (key, value) { 
      $("#dropdownlistId").append("<li> <a tabindex=\"-1\" href=\"#\"> " + key + "</a> </li>"); 
    }); 
} 

$(document).ready(function() { 
    setup(); 
}); 

는, 내가 좋아하는 자바 스크립트 파일을 호출하고있다. ul#dropdownlistId은 페이지 템플리트에 정적으로 존재하지만 li과 그 하위는 (준비 기능을 통해) DOM 준비 후 채워집니다. 어떤 기능

$(function() { 
    $('#dropdownlistId').on('click', 'li a', function() { 
     $('#textBoxId').val($(this).text()); 
    }); 
});