How to use appended button using jQuery [duplicate]
![Multi tool use Multi tool use](http://sgv.ssvwv.com/sg/ssvwvcomimagb.png)
Multi tool use
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
This question already has an answer here:
JavaScript does not fire after appending [duplicate]
3 answers
Event binding on dynamically created elements?
23 answers
I am trying to delete a row by clicking a button, but it only works on rows, which are not appended, so when I refresh the page for example or directly access it, I can delete the rows, which have been inserted in the database, but they are not appended any more, but if I click add row it appends it, but it is not usable . I mean that, I have to refresh the page, if I want to delete the previous rows, instead of deleting it without refresh.The same way behaves the edit button too.
PHP/HTML
while($row = mysqli_fetch_assoc($sql)){
echo '
<tr>
<td class="row-id">'.$row['id'].'</td>
<td>'.$row['name'].'</td>
<td>'.$row['created_at'].'</td>
<td>'.$row['last_modified'].'</td>
<td><button type="button" class="btn btn-danger delete">Delete</button></td>
<td><button type="button" class="btn btn-primary edit">Edit</button></td>
</tr>
';
}
jQuery/Ajax/Delete
$('.delete').on('click', function()
{
var delId = $(this).closest('tr').find('.row-id').html();
var thisDel = $(this);
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'del-sale-id': delId,
},
success: function (data) {
$(thisDel).parent().parent().remove();
}
});
});
jQuery/Ajax/Add
$('#save-new').on('click',function () {
var saleName = $('.form-control').val();
var date = new Date();
var currentTime = (date.getFullYear() +'-'+ date.getMonth() + 1 + '-' + date.getDate() + '' + ' ' +date.getHours() +':'+ date.getMinutes() +':'+ date.getSeconds() );
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'sale-name': saleName,
},
success: function (data) {
if(data != 'Row exists') {
$('#example').append("<tr> <td class='row-id'>" + data + "</td> <td>" + saleName + "</td> <td>" + currentTime + "</td> <td>0000-00-00 00:00:00</td> <td><button type="button" class="btn btn-danger">Delete</button></td> <td><button type="button" class="btn btn-primary">Edit</button></td></tr> ");
;
}
else if(data == 'Row exists'){
alert(data);
}
}
});
});
php jquery ajax
marked as duplicate by Jay Blanchard
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 3 at 21:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
JavaScript does not fire after appending [duplicate]
3 answers
Event binding on dynamically created elements?
23 answers
I am trying to delete a row by clicking a button, but it only works on rows, which are not appended, so when I refresh the page for example or directly access it, I can delete the rows, which have been inserted in the database, but they are not appended any more, but if I click add row it appends it, but it is not usable . I mean that, I have to refresh the page, if I want to delete the previous rows, instead of deleting it without refresh.The same way behaves the edit button too.
PHP/HTML
while($row = mysqli_fetch_assoc($sql)){
echo '
<tr>
<td class="row-id">'.$row['id'].'</td>
<td>'.$row['name'].'</td>
<td>'.$row['created_at'].'</td>
<td>'.$row['last_modified'].'</td>
<td><button type="button" class="btn btn-danger delete">Delete</button></td>
<td><button type="button" class="btn btn-primary edit">Edit</button></td>
</tr>
';
}
jQuery/Ajax/Delete
$('.delete').on('click', function()
{
var delId = $(this).closest('tr').find('.row-id').html();
var thisDel = $(this);
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'del-sale-id': delId,
},
success: function (data) {
$(thisDel).parent().parent().remove();
}
});
});
jQuery/Ajax/Add
$('#save-new').on('click',function () {
var saleName = $('.form-control').val();
var date = new Date();
var currentTime = (date.getFullYear() +'-'+ date.getMonth() + 1 + '-' + date.getDate() + '' + ' ' +date.getHours() +':'+ date.getMinutes() +':'+ date.getSeconds() );
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'sale-name': saleName,
},
success: function (data) {
if(data != 'Row exists') {
$('#example').append("<tr> <td class='row-id'>" + data + "</td> <td>" + saleName + "</td> <td>" + currentTime + "</td> <td>0000-00-00 00:00:00</td> <td><button type="button" class="btn btn-danger">Delete</button></td> <td><button type="button" class="btn btn-primary">Edit</button></td></tr> ");
;
}
else if(data == 'Row exists'){
alert(data);
}
}
});
});
php jquery ajax
marked as duplicate by Jay Blanchard
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 3 at 21:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
@JayBlanchard Why using another duplicate instead of the "real" dupe target? On "your" duplicate is no accepted answer, and the highest voted answer (yours) doesn't really answer the question, because marto is already using.on()
("You will likely want to change event handlers so they use the on() method.").
– Andreas
Jan 3 at 21:52
While the op is using.on()
@Andreas they are not using the method which forces event delegation. I have added your so-called "real" dup target. Both answers should get them to the finish line. BTW, you need not use quotes in your comment, they are "grammatically" incorrect.
– Jay Blanchard
Jan 3 at 21:55
add a comment |
This question already has an answer here:
JavaScript does not fire after appending [duplicate]
3 answers
Event binding on dynamically created elements?
23 answers
I am trying to delete a row by clicking a button, but it only works on rows, which are not appended, so when I refresh the page for example or directly access it, I can delete the rows, which have been inserted in the database, but they are not appended any more, but if I click add row it appends it, but it is not usable . I mean that, I have to refresh the page, if I want to delete the previous rows, instead of deleting it without refresh.The same way behaves the edit button too.
PHP/HTML
while($row = mysqli_fetch_assoc($sql)){
echo '
<tr>
<td class="row-id">'.$row['id'].'</td>
<td>'.$row['name'].'</td>
<td>'.$row['created_at'].'</td>
<td>'.$row['last_modified'].'</td>
<td><button type="button" class="btn btn-danger delete">Delete</button></td>
<td><button type="button" class="btn btn-primary edit">Edit</button></td>
</tr>
';
}
jQuery/Ajax/Delete
$('.delete').on('click', function()
{
var delId = $(this).closest('tr').find('.row-id').html();
var thisDel = $(this);
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'del-sale-id': delId,
},
success: function (data) {
$(thisDel).parent().parent().remove();
}
});
});
jQuery/Ajax/Add
$('#save-new').on('click',function () {
var saleName = $('.form-control').val();
var date = new Date();
var currentTime = (date.getFullYear() +'-'+ date.getMonth() + 1 + '-' + date.getDate() + '' + ' ' +date.getHours() +':'+ date.getMinutes() +':'+ date.getSeconds() );
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'sale-name': saleName,
},
success: function (data) {
if(data != 'Row exists') {
$('#example').append("<tr> <td class='row-id'>" + data + "</td> <td>" + saleName + "</td> <td>" + currentTime + "</td> <td>0000-00-00 00:00:00</td> <td><button type="button" class="btn btn-danger">Delete</button></td> <td><button type="button" class="btn btn-primary">Edit</button></td></tr> ");
;
}
else if(data == 'Row exists'){
alert(data);
}
}
});
});
php jquery ajax
This question already has an answer here:
JavaScript does not fire after appending [duplicate]
3 answers
Event binding on dynamically created elements?
23 answers
I am trying to delete a row by clicking a button, but it only works on rows, which are not appended, so when I refresh the page for example or directly access it, I can delete the rows, which have been inserted in the database, but they are not appended any more, but if I click add row it appends it, but it is not usable . I mean that, I have to refresh the page, if I want to delete the previous rows, instead of deleting it without refresh.The same way behaves the edit button too.
PHP/HTML
while($row = mysqli_fetch_assoc($sql)){
echo '
<tr>
<td class="row-id">'.$row['id'].'</td>
<td>'.$row['name'].'</td>
<td>'.$row['created_at'].'</td>
<td>'.$row['last_modified'].'</td>
<td><button type="button" class="btn btn-danger delete">Delete</button></td>
<td><button type="button" class="btn btn-primary edit">Edit</button></td>
</tr>
';
}
jQuery/Ajax/Delete
$('.delete').on('click', function()
{
var delId = $(this).closest('tr').find('.row-id').html();
var thisDel = $(this);
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'del-sale-id': delId,
},
success: function (data) {
$(thisDel).parent().parent().remove();
}
});
});
jQuery/Ajax/Add
$('#save-new').on('click',function () {
var saleName = $('.form-control').val();
var date = new Date();
var currentTime = (date.getFullYear() +'-'+ date.getMonth() + 1 + '-' + date.getDate() + '' + ' ' +date.getHours() +':'+ date.getMinutes() +':'+ date.getSeconds() );
$.ajax({
method: "POST",
ContentType: 'text/html',
url: 'database/db.php',
dataType: 'html',
data: {
'sale-name': saleName,
},
success: function (data) {
if(data != 'Row exists') {
$('#example').append("<tr> <td class='row-id'>" + data + "</td> <td>" + saleName + "</td> <td>" + currentTime + "</td> <td>0000-00-00 00:00:00</td> <td><button type="button" class="btn btn-danger">Delete</button></td> <td><button type="button" class="btn btn-primary">Edit</button></td></tr> ");
;
}
else if(data == 'Row exists'){
alert(data);
}
}
});
});
This question already has an answer here:
JavaScript does not fire after appending [duplicate]
3 answers
Event binding on dynamically created elements?
23 answers
php jquery ajax
php jquery ajax
asked Jan 3 at 21:40
marto911marto911
1312
1312
marked as duplicate by Jay Blanchard
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 3 at 21:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Jay Blanchard
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 3 at 21:45
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
@JayBlanchard Why using another duplicate instead of the "real" dupe target? On "your" duplicate is no accepted answer, and the highest voted answer (yours) doesn't really answer the question, because marto is already using.on()
("You will likely want to change event handlers so they use the on() method.").
– Andreas
Jan 3 at 21:52
While the op is using.on()
@Andreas they are not using the method which forces event delegation. I have added your so-called "real" dup target. Both answers should get them to the finish line. BTW, you need not use quotes in your comment, they are "grammatically" incorrect.
– Jay Blanchard
Jan 3 at 21:55
add a comment |
@JayBlanchard Why using another duplicate instead of the "real" dupe target? On "your" duplicate is no accepted answer, and the highest voted answer (yours) doesn't really answer the question, because marto is already using.on()
("You will likely want to change event handlers so they use the on() method.").
– Andreas
Jan 3 at 21:52
While the op is using.on()
@Andreas they are not using the method which forces event delegation. I have added your so-called "real" dup target. Both answers should get them to the finish line. BTW, you need not use quotes in your comment, they are "grammatically" incorrect.
– Jay Blanchard
Jan 3 at 21:55
@JayBlanchard Why using another duplicate instead of the "real" dupe target? On "your" duplicate is no accepted answer, and the highest voted answer (yours) doesn't really answer the question, because marto is already using
.on()
("You will likely want to change event handlers so they use the on() method.").– Andreas
Jan 3 at 21:52
@JayBlanchard Why using another duplicate instead of the "real" dupe target? On "your" duplicate is no accepted answer, and the highest voted answer (yours) doesn't really answer the question, because marto is already using
.on()
("You will likely want to change event handlers so they use the on() method.").– Andreas
Jan 3 at 21:52
While the op is using
.on()
@Andreas they are not using the method which forces event delegation. I have added your so-called "real" dup target. Both answers should get them to the finish line. BTW, you need not use quotes in your comment, they are "grammatically" incorrect.– Jay Blanchard
Jan 3 at 21:55
While the op is using
.on()
@Andreas they are not using the method which forces event delegation. I have added your so-called "real" dup target. Both answers should get them to the finish line. BTW, you need not use quotes in your comment, they are "grammatically" incorrect.– Jay Blanchard
Jan 3 at 21:55
add a comment |
0
active
oldest
votes
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sx,cHvxo6 WINUy0 ziaTtXMgR8SUVqX2DTFI27Rx6avG7mKt0fILJ4fE,IKpdQpVX0hzxdZWBdh3NmlNx0pykKxs,96pDLSO2HJ6No
@JayBlanchard Why using another duplicate instead of the "real" dupe target? On "your" duplicate is no accepted answer, and the highest voted answer (yours) doesn't really answer the question, because marto is already using
.on()
("You will likely want to change event handlers so they use the on() method.").– Andreas
Jan 3 at 21:52
While the op is using
.on()
@Andreas they are not using the method which forces event delegation. I have added your so-called "real" dup target. Both answers should get them to the finish line. BTW, you need not use quotes in your comment, they are "grammatically" incorrect.– Jay Blanchard
Jan 3 at 21:55