0
私はJavascriptを初めて使用しています。Dblclickリスナーはコード内で一度だけ起動します
function display(arr) {
$(".tbl tbody").empty();
for (i = 0; i < arr.length; i++) {
$(".tbl tbody").append('<tr class="tblrow" id = "'+i+'"> <td><input id="editInput" type="text"/>'+arr[i].Empid+'</td><td>'+arr[i].name+'</td><td>'
\t \t \t \t \t +arr[i].pd+'</td><td>'+arr[i].unplannedleaves+'</td><td>'+arr[i].response_time+'</td><td class = "tt"><button class="delbtn" id ="btn'+i+'">Delete</button></td></tr>');
$("td").css("text-align", "center");
$("td").css("border", "1px solid black");
$(".tt").css("border", "none");
$(".tbl").css("border", "none");
$(".delbtn").css("display", "none");
}
}
$("tr").on('dblclick', function() {
var s = this.id;
$("#btn" + s).css("display", "block");
});
$(".delbtn").click(function() {
var s = this.id;
var k = s.slice(3);
arr.splice(k, 1);
display(arr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addelem">
<table class="tbl1">
<tr>
<td>
<input id="empid" type="text" placeholder="EmpId">
</td>
<td>
<input id="name" type="text" placeholder="Name">
</td>
<td>
<input id="pd" type="number" placeholder="Pds Delivered">
</td>
<td>
<input id="unp" type="number" placeholder="Unplanned leaves">
</td>
<td>
<input id="rsp" type="number" placeholder="Response Time">
</td>
</tr>
</table>
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
</div>
私のテーブルはdisplay
方法を使用して表示されます後。最初に行をdblclickすると、期待通りに動作し、削除ボタンが表示されます。削除をクリックすると、行が削除され、テーブルが再描画されます。しかし、この後、行はdbl-clickableではありません。私はデバッグを試みましたが、コントロールはdblclickリスナーには入っていません。
なぜ誰かが説明できるのですか?ここで何がうまくいかないの?
あなたのDBLCLICKイベントで新たなTRをサブスクライブします( 'DBLCLICK' に関する、関数(){ \t \t \t \t \t \t VAR S = this.id; \t \t \t \t \t \t $( "#btn" + s).css( "表示"、 "ブロック"); \t \t \t \t \t}); –
これがなぜ機能しないのか説明できますか? –
このように、 '$(" tr ")。on( 'dblclick'、function(){var s = this.id; $("#btn "+ s).css(" display "、" block " );}); '、すべてのtrは、ページがロードされたときにあなたのイベントを購読しますが、ページがロードされた後に動的に追加されるtrはdblclickイベントにバインドされません。このページをご覧ください:http://api.jquery.com/on/#on-events-selector-data「直接イベントと委任イベント」セクション –