We are adding rows to the table in html dynamically, But the problem is that Click event of is not trigger for dynamically added rows.
<table>
<tbody id="DataTbody">
<tr>
<td class="Master-edit">
Some display.....
</td>
<tr>
</tbody>
<table>
We have a scroll event to add rows to the " with ID DataTbody"
var bool_scroll = false;
$(".sticky-wrap").scroll(function () {
if (bool_scroll == false) {
if ($("div.sticky-wrap").scrollTop() > ($("#ContentTable").height() - $("div.sticky-wrap").height() - 1)) {
bool_scroll = true;
AddIndmanRecord();
bool_scroll = false;
}
}
});
var addcount = 0;
function AddIndmanRecord() {
var Current_tableRowcount = $("#DataTbody").find("tr").length;
$.ajax({
type: 'Get',
url: 'ScrollMaster',
async: false,
dataType: "html",
success: function (data) {
$("#DataTbody").append(data); // New row to the #DataTbody
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
We have a jQuery for the click of based on the className 'Master-edit'.
$(".Master-edit").dblclick(function () {
$.ajax({
async:false,
// Call CreatePartialView action method
url: "/Master/EditPartial",
type: 'Get',
success: function (data) {
//Some display
},
error: function () {
alert("something seems wrong");
}
});
});
Here td with className ".Master-edit" not trigger the click event if it added dynamically otherwise working fine.