Mindblowing jQuery Weirdness
Posted
by Jason
on Stack Overflow
See other posts from Stack Overflow
or by Jason
Published on 2010-03-30T00:34:24Z
Indexed on
2010/03/30
0:43 UTC
Read the original article
Hit count: 355
...at least to me. This code used to work fine. I'm pretty sure nothing has changed, but now all of the sudden it behaves oddly. Basically I'm trying to create inline editing functionality. When the user clicks on the link, it dynamically generates a textbox and a confirm and cancel link. I'm having problems with the cancel link not removing everything in the cell.
HTML:
...
<td class="bid">
<a href="javascript:" class="102093" title="Click to modify bid">$0.45</a>
</td>
...
Binding jQuery (in $(function())
):
$('.bid a').live('click', renderBidChange);
....
$('.report_table .cancel').live('click', cancelUpdate);
renderBidChange
(this function creates the dynamic elements):
function renderBidChange(){
var cpc = $(this);
var value = cpc.text().replace('$', '');
var cell = cpc.parent('.bid');
cpc.hide();
var input = document.createElement('input');
$(input).attr({type:'text',class:'dynamic cpc-input'}).val(value);
cell.append(input);
var accept = document.createElement('a');
$(accept).addClass('accept').attr({'href':'javascript:',
'title':'Accept Changes'}).text('Accept Changes');
cell.append(accept);
var cancel = document.createElement('a');
$(cancel).addClass('cancel').attr({'href':'javascript:',
'title':'Cancel Changes'}).text('Cancel Changes');
cell.append(cancel);
$(input).focus();
input.select();
}
cancelUpdate
this function just removes everything visible (all the dynamic junk in this case) in the cell and shows what used to be there.
function cancelUpdate(){
var cell = $(this).parent();
cell.find(':visible').remove();
cell.find(':hidden').show();
}
However, for some reason, the cancel link remains after it is clicked! Everything else is removed except that. W T F
Thanks for any insight you're able to provide! I'm sure it's just some stupid little detail I'm over[caffeinatedly]looking...
UPDATE Immediately after posting this I epiphanied that it may be a CSS issue, but after double checking my code, it is not.
© Stack Overflow or respective owner