Its a problem with the scope of the variables that you are using within the
click function.
Try it this way....
$.getJSON("ajax_test.asp", { mode: 'get' } , function(j){
var itm, currentItem;
for (var i = 0; i < j.items.length; i++) {
itm = j.items[i]; /*not necessary but shortens typing and might aid
debugging...*/
currentItem = '<div id="deleteItemDiv_' + itm.item_id + '">'+
itm.item;
currentItem += '<input type="image" src="images/icons/cancel.gif"
id="deleteItemBtn_';
currentItem += itm.item_id + '" class="deleteItemBtn" /></div>';
$('#content p').append(currentItem);
} // end for
$('.deleteItemBtn').click(function() { /*uses class to find all buttons
*/
console.log('Adding click handler for button id: ' + this.id);
var split_id = this.id.split('_')
, item_id = split_id[1]
, currentDiv = '#deleteItemDiv_' + item_id /* or currentDiv =
this.id.replace(/Btn/, 'Div') */
/* or currentDiv = $(this).parent() and then change the removal to
just currentDiv.remove(); */
;
$.ajax({
beforeSend: function(x) { console.log('Attempting to delete item
#' + item_id); },
type: 'POST',
url: 'ajax_test.asp?' + new Date().getTime(), // prevent caching
in IE
data: {item_id : item_id, mode: 'delete' },
success: function(msg) { $(currentDiv).remove(); },
});
return false;
});
});
jayturley wrote:
>
>
> no matter which delete button is clicked?
>
> Please ignore the verbose code; it's a result of trying to figure out
> what is going on.
>
> Once this list is loaded, whenever I click on any deleteButton, it
> sends a post request with the item id of the last item in the list.
> Then the last item is deleted from the database and from the DOM.
>
> The first console.log shows the proper item id, when the click handler
> is added. But the second console.log shows the last item id added to
> the DOM.
>
> I'm guessing it has something to do with the whole thing about
> anonymous functions:
>
> $(document).ready(function() {
> $('#example').click(myfunction(variable));
> });
>
> versus
>
> $(document).ready(function() {
> $('#example').click(function() {
> myfunction(variable);
> });
> });
>
> but I just don't see it.
>
> -- problem code begin --
>
> $.getJSON("ajax_test.asp", { mode: 'get' } , function(j){
> for (var i = 0; i < j.items.length; i++) {
> var itemID = j.items[i].item_id;
> var itemVal = j.items[i].item;
> var currentItem = '';
> currentItem += '<div id="deleteItemDiv_' + itemID + '">' +
> itemVal;
> currentItem += ' <input type="image" src="images/icons/
> cancel.gif" id="deleteItemBtn_' + itemID + '" />'
> currentItem += '</div>';
> $('#content p').append(currentItem);
> console.log('Adding click handler for: #deleteItemBtn_' +
> itemID);
> var currentDiv = '#deleteItemDiv_' + itemID;
> var currentBtn = '#deleteItemBtn_' + itemID;
> $(currentBtn).click(function() {
> $.ajax({
> beforeSend: function(x) {
> console.log('Attempting to delete using button: '
> + currentBtn);
> },
> type: 'POST',
> url: 'ajax_test.asp?' + new Date().getTime(), //
> prevent caching in IE
> data: {item_id : itemID, mode: 'delete' },
> success: function(msg) {
> $(currentDiv).remove();
> },
> });
>
> return false;
> });
> }
> });
>
> Thanks much!
>
> -jay
>
>
>
--
View this message in context:
http://www.nabble.com/Why-does-this-code-always-delete-the-last-element-in-the-list-tf4203309s15494.html#a11960222
Sent from the JQuery mailing list archive at Nabble.com.
