JQuery&Javascript

[JQuery] - 동적으로 생성된 태그 실행 : on()

Riucc 2019. 5. 3. 15:22

○ 동적으로 생성된 태그 실행 : on()

 

- 동적으로 생성된 태그 실행 : on()


동적으로 생성된 태그의 버튼 클릭이벤트를 사용하고 싶으면

$('#btn').click(function() { }); 을 쓰면 안되고


$(document).on('click', '#btn', function() { }); 써야한다


각 파라매터들은, 

   첫번째 : click / change 등의 이벤트

   두번째 : 이벤트가 적용될 태그의 id 및 name

   세번째 : 동작 함수


예시로 나는 동적으로 추가된 뷰의 select 박스에서 선택 시, 뷰가 바뀌게 끔 하는 거였는데

$('#btn').click(function() { }); 쓰면 작동하지 않았다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
 
<body>
    <input type="button" id="btn1" value="버튼1" />
 
    <script type="text/javascript">
        // 동적으로 생성(append() 등)된 태그들에게 이벤트를 적용할 수 있따
        // $("#btn").click(function(){ 이렇게로는 동적으로 생성된 걸로 이벤트 못 줌
        $(document).on("click", "#btn1", function () {
            alert($('#btn1').val());
        });
    </script>
 
</body>
cs


저작자표시