![](/img/trans.png)
[英]How to find a dynamically created element in the code behind file by using JavaScript
[英]Dynamically created JavaScript code from Code behind not working on javascript
我为我的问题进行了大量搜索,但找不到任何合适的解决方案。 我有一个具有html select语句的JavaScript代码,我想在后面的代码中添加选项
JavaScript功能
function addMoreRows()
{
rowCount++;
var recRow = "";
recRow += '<tr id="rowCount' + rowCount + '">';
recRow += '<td style="margin: 0px; padding: 0px;">';
recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';
<%=options%>
recRow += '</select>';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
recRow += '</td></tr>';
jQuery('#<%=tbdy_addedRows.ClientID%>').append(recRow);
}
Aspx代码隐藏
public string options;
var pro = (from m in db.products select m).ToList();
foreach (var item in pro)
{
ListItem list = new ListItem();
list.Value = item.code.Trim();
list.Text = item.name.Trim();
options += "recRow += '<option value=\"" + item.code.Trim() + "\">" + item.name.Trim() + "</option>';\n";
}
有什么标准的方法可以执行此操作,因为源视图显示选项可以正确提取,但JavaScript不能正常工作。
在文件后面的代码中创建[WebMethod]
,该文件将建立选择选项列表,并使用$.ajax
从javascript调用它。
后面的代码:
[System.Web.Services.WebMethod]
public static string GetOptions()
{
string options = "<option value='Option1'>Option 1</option><option value='Option2'>Option 2</option>";
return options;
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
var rowCount = 0;
$("#btnAddRow").click(function () {
$.ajax({
type: "POST",
url: "AddRowsInJquery.aspx/GetOptions",
contentType: "application/json;charset=utf-8",
success: function (data) {
var options = data.d;
addMoreRows(options);
},
error: function (errordata) {
alert(errordata);
}
});
});
function addMoreRows(options) {
rowCount++;
var recRow = "";
recRow += '<tr id="rowCount' + rowCount + '">';
recRow += '<td style="margin: 0px; padding: 0px;">';
recRow += '<select style="height: 25px; border:0; width:250px; margin: 0px; padding: 0px;" id="ddl_grid_productList" onchange="addrowswithselect()" data-placeholder="Choose a State...">';
recRow += options;
recRow += '</select>';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="field_one" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" style="height: 25px; border:0px; margin: 0px; padding: 0px" id="Qty' + rowCount + '" onchange="add(' + rowCount + ')" class="col-xs-10 col-sm-12" />';
recRow += '</td><td style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input type="text" id="Rate' + rowCount + '" onchange="add(' + rowCount + ')" style="height: 25px;border:0px; margin: 0px; padding: 0px" class="col-xs-10 col-sm-12" />';
recRow += '</td><td class="hidden-480" style="height: 25px; margin: 0px; padding: 0px">';
recRow += '<input id="total' + rowCount + '" type="text" onblur="totalamout(),addrows(this.value);" style="height: 25px;border:0px; padding: 0px; margin: 0px;" class="col-xs-10 col-sm-12" readonly />';
recRow += '</td></tr>';
jQuery('#<%: Table1.ClientID%>').append(recRow);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="Add Row" id="btnAddRow" />
<asp:Table ID="Table1" runat="server">
<asp:TableHeaderRow>
<asp:TableCell>Column 1</asp:TableCell>
<asp:TableCell>Column 2</asp:TableCell>
<asp:TableCell>Column 3</asp:TableCell>
<asp:TableCell>Column 4</asp:TableCell>
<asp:TableCell>Column 5</asp:TableCell>
</asp:TableHeaderRow>
</asp:Table>
</form>
</body>
经过审查您的问题。 我可以建议使用unbind&bind事件进行动态控制。 它将再次绑定您的事件,并且动态控件的事件将触发。
$("#mycontrol").bind("click", (function () { $('span').text(" Clicked"); }));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.