div 内のテーブルに HTML select タグを配置すると、奇妙な問題が発生します。ビューソースでは、タグがビューソースを表示していますが、HTML としてレンダリングされていないことがわかります。
実際、テーブルを動的に追加しています。JSP:`
<tbody id="t_columns_list" class="ul-body-b aa content ul-body-b-big ul-dd">
</tbody>
`
Jクエリ:
gridTemplate:'<tr class="ul-list-b"><td class="lic-3-4"><%=columnName%></td><td class="lic-3-4"><%=dataType%></td><td class="lic-3-4 "><div ><select name="action_col"><option value="">None</option>'+
'</select></div></td><td class="lic-4-4" style="text-align:center"><button class="btn-b">Edit</button></td><td class="lic-4-4" style="text-align:center"></td><td class= "lic-4-4" style="text-align:center"><input type="text" style="width:150px;"></td><td class="lic-4-4" style="text-align:center"><input type="checkbox" id="invalid"></td><td class="lic-4-4" style="text-align:center"><input type="text" style="width:150px;"></td></tr>',
render:function(eventName){
var self=this;
// var grid = $("#t_columns_list");
var grid = $(this.el).find('#t_columns_list');
grid.show();
var listHtml = "";
if(this.model.models.length > 0){
this.tableCount = this.model.models.length;
_.each(this.model.models, function (table,i) {
var table_item = table.toJSON();
table_item.ownerName = table_item.ownerName || "";
_.each(table_item.columns,function(column,i){
this.columnCount++;
listHtml += _.template(this.gridTemplate,column);
},this);
}, this);
grid.html(listHtml);
$(this.el).find('table').colResizable();
}
//call ajax
var navigation_tabs = $("#nav_simulate");
_.each(this.model.models, function (table,i) {
var table_item = table.toJSON();
table_item.ownerName = table_item.ownerName || "";
navigation_tabs.append('<li>'+table_item.tableName+'</li>');
});
}