How to use appended button using jQuery [duplicate]

Multi tool use
Multi tool use





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0
















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);
}
}
});

});









share|improve this question













marked as duplicate by Jay Blanchard php
Users with the  php badge can single-handedly close php questions as duplicates and reopen them as needed.

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




















0
















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);
}
}
});

});









share|improve this question













marked as duplicate by Jay Blanchard php
Users with the  php badge can single-handedly close php questions as duplicates and reopen them as needed.

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
















0












0








0









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);
}
}
});

});









share|improve this question















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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 3 at 21:40









marto911marto911

1312




1312




marked as duplicate by Jay Blanchard php
Users with the  php badge can single-handedly close php questions as duplicates and reopen them as needed.

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 php
Users with the  php badge can single-handedly close php questions as duplicates and reopen them as needed.

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





















  • @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














0






active

oldest

votes

















0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes

Sx,cHvxo6 WINUy0 ziaTtXMgR8SUVqX2DTFI27Rx6avG7mKt0fILJ4fE,IKpdQpVX0hzxdZWBdh3NmlNx0pykKxs,96pDLSO2HJ6No
ltzp,mnOGFKkz50Klko,aoC,4WQH9fhd,W0r8i8a68K9himfYYdHpCM9J8

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas