我正在使用Datatables来处理我正在进行的项目。我有我的桌子使用＆＃39;响应＆＃39;插入。
This nests my data and the user needs to click a + button to expand the record. Nested within this is a textarea, some hidden fields, and a html button.这个html按钮执行一些javascript。当我关闭响应时，它可以100％有效地工作。 当我启用它时，它将不再执行任何JavaScript。按钮变得完全没用。
我真的需要使用响应功能。我无法弄清楚为什么它在嵌套时会破坏我的javascript。它与父子节点有什么关系吗？我希望你们能为我揭开这一点。
这是一条记录，我知道它可以解决很多问题，但是Datatables增加了很多标记，我不想留下任何记录。
<table>
<thead>
<tr>
<th colspan="3" align="center"/>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="7be885">< 5</td>
<td bgcolor="f0ee48">6 - 7</td>
<td bgcolor="e87b7b">> 7</td>
</tr>
</tbody>
</table>
<div id="contentTable_wrapper" class="dataTables_wrapper no-footer">
<div class="fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr">
<div id="contentTable_filter" class="dataTables_filter">
<label>
Search:
<input type="search" class="" placeholder="" aria-controls="contentTable"/>
</label>
</div>
</div>
<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1234px; padding-right: 0px;">
<table width="90%" class="dt-responsive dataTable no-footer" cellspacing="0" role="grid" style="margin-left: 0px; width: 1234px;">
<thead>
<tr role="row">
<th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 52px;" aria-sort="ascending" aria-label="Prod #:: activate to sort column descending">
<div class="DataTables_sort_wrapper">
Prod #:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 51px;" aria-label="Origin:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Origin:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 218px;" aria-label="Description:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Description:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<td class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 88px;" aria-label="Commodity:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Commodity:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</td>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 86px;" aria-label="Brand:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Brand:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 58px;" aria-label="Vendor:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Vendor:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 30px;" aria-label="WH:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
WH:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 69px;" aria-label="Date:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Date:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 85px;" aria-label="Lot-Sublot:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Lot-Sublot:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 44px;" aria-label="Code:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
Code:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
<th class="sorting ui-state-default" tabindex="0" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 31px;" aria-label="OH:: activate to sort column ascending">
<div class="DataTables_sort_wrapper">
OH:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="dataTables_scrollBody" style="overflow: auto; height: 500px; width: 100%;">
<table width="90%" id="contentTable" class="dt-responsive dataTable no-footer collapsed dtr-inline" cellspacing="0" role="grid" aria-describedby="contentTable_info" style="width: 1234px;">
<thead>
<tr role="row" style="height: 0px;">
<th class="sorting ui-state-default sorting_asc" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 52px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-sort="ascending" aria-label="Prod #:: activate to sort column descending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Origin:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 218px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Description:: activate to sort column ascending">
<td class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 88px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Commodity:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 86px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Brand:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 58px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Vendor:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 30px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="WH:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 69px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Date:: activate to sort column ascending">
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 85px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Lot-Sublot:: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">
<div class="DataTables_sort_wrapper">
Lot-Sublot:
<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"/>
</div>
</div>
</th>
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 44px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Code:: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">
<div class="DataTables_sort_wrapper">
</div>
</th>
<th class="sorting ui-state-default" aria-controls="contentTable" rowspan="1" colspan="1" style="width: 31px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="OH:: activate to sort column ascending">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">
<div class="DataTables_sort_wrapper">
</div>
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd parent">
<td class="sorting_1 sorting_2">00184</td>
<td>NC</td>
<td>MICRO SWEET POTATO</td>
<td>SWEET POTATO</td>
<td/>
<td>SCOFA</td>
<td>GA</td>
<td>/ /</td>
<td bgcolor="e87b7b">79169201-</td>
<td/>
<td>0</td>
</tr>
<tr class="child">
<td class="child" colspan="11">
<ul data-dtr-index="35">
<li data-dtr-index="11">
<span class="dtr-title">Commit::</span>
<span class="dtr-data">0</span>
</li>
<li data-dtr-index="12">
<span class="dtr-title">Avail::</span>
<span class="dtr-data">0</span>
</li>
<li data-dtr-index="13">
<span class="dtr-title">Expect::</span>
<span class="dtr-data">0</span>
</li>
<li data-dtr-index="14">
<span class="dtr-title">Cost::</span>
<span class="dtr-data">$0.00</span>
</li>
<li data-dtr-index="15">
<span class="dtr-title">Ext Cost::</span>
<span class="dtr-data">$0.00</span>
</li>
<li data-dtr-index="16">
<span class="dtr-title">Comments::</span>
<span class="dtr-data">
<textarea rows="2" cols="50" id="txtComment35" name="txtComment35"/>
<button type="button" class="submitComment" name="btnSubmit35" id="btnSubmit35">Save</button>
<input type="hidden" name="lotNumber35" id="lotNumber35" value="79169201"/>
<input type="hidden" name="subLot35" id="subLot35" value=" "/>
<input type="hidden" name="brand35" id="brand35" value=" "/>
</span>
</li>
</ul>
</td>
</tr>
这是我的javascript：
<div id="frmNotifications">
</div>
<script>
$(document).ready(function () {
$('#contentTable').DataTable({
"paging": false,
"jQueryUI": true,
"responsive": true,
"scrollx": true,
"scrollY": 500,
columnDefs: [
{
targets: [ 0 ],
orderData: [ 0, 1 ]
},
{
targets: [ 1 ],
orderData: [ 1, 0 ]
},
{
targets: [ 4 ],
orderData: [ 4, 0 ]
}
]
});
//anything with the class submitComment will fire this javascript event
$('.submitComment').click(function (event) {
//Pull the record # ID that is generated from the key of the array associated with each record
var activeRecord = getId($(this).attr('name'));
//grab the associated data from given field for instance value 32 from #txtComment32
var comment = $('#txtComment' + activeRecord).val();
var lot = $('#lotNumber' + activeRecord).val();
var sublot = $('#subLot' + activeRecord).val();
var brand = $('#brand' + activeRecord).val();
//assign this data into an array
var postData = {'lot_num': lot,
'sub_lot': sublot,
'brand': brand,
'comment': comment};
//post the data to the controller if the comment field is filled out
if (comment) {
$.ajax({
url: "?url=LotReport/saveComment",
type: "POST",
data: postData,
success: function (data) {
//modal dialog status of update/insert
$('#frmNotifications').html(data);
$('#frmNotifications').dialog({
buttons: {}
})
}
});
} else {
//in case of error display modal dialog
$('#frmNotifications').html('Enter a valid comment');
$('#frmNotifications').dialog({
buttons: {}
})
}
event.preventDefault();
});
//this function strips the element name and only returns the unique id for the record. For instance: #txtComment32 after this function will return (int)32
//we then append this value to all the other fields so we can pull data from them.kk
function getId(value) {
value = value.replace(/[^\d.]/g, '');
value = parseInt(value);
return value;
}
});
</script>
非常感谢任何帮助。感谢
编辑：
如果我查看源页面，而没有Datatables处理我的表，则记录如下：
<td>
<textarea rows="2" cols="50" id="txtComment0"
name="txtComment0"></textarea>
<button type="button" class="submitComment" name="btnSubmit0"
id="btnSubmit0">Save
</button>
<input type="hidden" name="lotNumber0" id="lotNumber0"
value="79153801">
<input type="hidden" name="subLot0" id="subLot0"
value="R0">
<input type="hidden" name="brand0" id="brand0"
value="WALT ">
</td>
我的PHP就是：
<textarea rows="2" cols="50" id="txtComment<?= $key ?>"
name="txtComment<?= $key ?>"><?php if (isset($data2->Comment)) {
echo $data2->Comment;
} ?></textarea>
答案 0 :(得分：2)
我认为您的点击处理程序需要为delegated。
尝试在另一个.submitComment侦听器之后添加此侦听器以进行测试。
$(".dataTables_scrollBody").on("click",".submitComment",function(event){
alert('abc');
});
如果有效，请用您的代码替换alert。请注意，event对象和this的行为略有不同。
要更好地理解这一点，请使用：http://jsfiddle.net/1awnjewn/1/
答案 1 :(得分：0)
<textarea>不是自动关闭的，因此您必须将其写为<textarea ...></textarea>而不是<textarea .../>。
因此，在当前代码中，以下按钮和输入声明是 not 元素，但它们是textarea值的一部分：
<textarea rows="2" cols="50" id="txtComment35" name="txtComment35"/>
<button type="button" class="submitComment" name="btnSubmit35" id="btnSubmit35">Save</button>
<input type="hidden" name="lotNumber35" id="lotNumber35" value="79169201"/>
<input type="hidden" name="subLot35" id="subLot35" value=" "/>
<input type="hidden" name="brand35" id="brand35" value=" "/>
在这种情况下，textarea在其父元素关闭之前不会关闭。