It is important to remember that create must be triggered on the parent container and not on the individual element that needs to be enhanced.
$('selector').trigger('선택할 이벤트');
// 트리거를 create로 변경해주면 된다.
$("타겟").append("추가할 html").trigger("create");
아래 예제는 http://jsbin.com/umatel/1/edit?html,js,output 를 참조하여 일부 헤더 정보 추가하고 테스트했다.
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Trigger Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
<style>
body {
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div data-role="page" id="first">
<button>Button element</button>
</div>
<script>
$("button").click(function() {
$('<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke"><thead><tr><th data-priority="1">Rank</th><th data-priority="persist">Movie Title</th><th data-priority="2">Year</th><th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th><th data-priority="4">Reviews</th></tr></thead><tbody><tr><th>1</th><td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td><td>1941</td><td>100%</td><td>74</td></tr><tr><th>2</th><td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td><td>1942</td><td>97%</td><td>64</td></tr><tr><th>3</th><td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td><td>1972</td><td>97%</td><td>87</td></tr><tr><th>4</th><td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td><td>1939</td><td>96%</td><td>87</td></tr><tr><th>5</th><td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td><td>1962</td><td>94%</td><td>87</td></tr></tbody></table>').appendTo("#first");
$("#first").trigger("create");
});
</script>
</body>
</html>
|
$('<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke"><thead><tr><th data-priority="1">Rank</th><th data-priority="persist">Movie Title</th><th data-priority="2">Year</th><th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th><th data-priority="4">Reviews</th></tr></thead><tbody><tr><th>1</th><td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td><td>1941</td><td>100%</td><td>74</td></tr><tr><th>2</th><td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td><td>1942</td><td>97%</td><td>64</td></tr><tr><th>3</th><td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td><td>1972</td><td>97%</td><td>87</td></tr><tr><th>4</th><td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td><td>1939</td><td>96%</td><td>87</td></tr><tr><th>5</th><td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td><td>1962</td><td>94%</td><td>87</td></tr></tbody></table>').appendTo("#first");
실행결과
클릭전
클릭후
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| 카카오지도 Uncaught SyntaxError: Identifier 'marker' has already been declared (3) | 2024.03.01 |
|---|---|
| 동적 li 태그 추가 예제 (0) | 2022.05.27 |
| jQuery 사용자 정의 메소드 만들기 ($.fn.메소드명) (0) | 2021.09.17 |
| jQuery + PHP 오름차순/내림차순 정렬 처리 (0) | 2021.07.25 |
| [Javascript] 단축 평가 (short-circuit evaluation) 논리 계산법 (0) | 2021.06.13 |
Link2Me
