I have a MVC site and I have a html table and on double click on a cell it will go to edit mode and for the first time it works and next time when I double on the same cell or any other cell it dosen't work, when I make a click anywhere and then if I do double click it works fine.
I suspect some conflict between single click and double click.
$('#TableOverride tr:gt(0)').each(function () {
$(this).find('td:eq(9)').dblclick(function () {
EditCell(this, 9);
});
});
Update : Tested in Chrome and it works fine without any issues, it looks like a browser issue with IE 11 and earlier versions.
function EditCell(thisCell, colNum) {
var Id;
// if the table cell is not in edit mode
if ($(thisCell).find('input').length == 0) {
if (colNum == 4 && $(thisCell).parent().parent().parent()[0].id == 'OverrideTable') {
myBlk = $(thisCell).html();
$(thisCell).html('<input type="text" data-oldvalue="' + myBlk + '" />');
$(thisCell).find('input').val(myBlk);
$(thisCell).find('input').trigger('focus');
$(thisCell).find('input').keypress(function (e) {
if (e.which == 13) {
// If Enter key is pressed, update data.
myBlk = $(this).val();
if (myBlk == '') {
$('div.errorSummary').html('my block cannot be empty!');
$('div.errorSummary').show();
} else {
Loadmyblk(myBlk, this);
LeaseOverrideObj.GetLeaseOverride());
}
});
}
Try this, it should work, add custom class eg "EditableCell" for using in dblclick event binding on document.
$('#TableOverride tr:gt(0)').each(
function () {
$(this).find('td:eq(9)').removeClass('EditableCell').addClass('EditableCell');
});
});
$(document).on('dblclick', '.EditableCell', function()
{ EditCell(this, 9);
});
Please note $(document).on
should not be called in any loop, it should be called only once in document.ready
.
Updated fiddle link to demo dblclick on dynamically added events
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.