이벤트 부여

<table id="grid-table-1">
</table>
<script id="grid-template-1" type="text/template">
	<table width="100%" height="350px">
		<thead>
			<tr>
				<th name="indx" align="center">순위</th>
				<th name="Isu">종목명</th>
				<th name="NowPrc" align="right">현재가</th>
				<th name="PrdayCmp" align="right">전일비</th>
				<th name="Updn" align="right">등락율(%)</th>
				<th name="buy" align="right">사기</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td name="indx" bind="indx"></td>
				<td name="Isu" bind="Isu"></td>
				<td name="NowPrc" bind="NowPrc"></td>
				<td name="PrdayCmp" bind="PrdayCmp"></td>
				<td name="Updn" bind="Updn"></td>
				<td name="buy"><input type="button" class="buy-button"/></td>
			</tr>
		</tbody>
	</table>
</script>
 
<script>
var table1 = $('#grid-table-1');
var template1 = $('#grid-template-1');
var grid = webponent.grid.init(table1, template1);
</script>

위 그리드는 마지막 컬럼에 buy-button이라는 클래스를 가진 버튼이 있습니다. 이 버튼을 클릭했을때 인터랙션이 일어나도록 하려면 다음과 같은 방법이 있습니다.

// 그리드 초기화시 rowRendered 옵션 사용
var grid = webponent.grid.init(table1, template1, {
	rowRendered : function (row, data, index) {
 
		var button = $(row).find('.buy-button');
		button.on('click', function () {
			
			// Do some thing
		});
	}
});
 
// 혹은 rowRendered이번트 사용
grid.on('rowRendered', function (e, row, data, index) {

		var button = $(row).find('.buy-button');
		button.on('click', function () {

			// Do some thing
		});
	}
});

$(grid.markup.main.body.tbody).on('click', '.buy-button', function () {
	
	var button = $(this);
 
	button.on('click', function () {

		// Do some thing
	});
});