How do I select a specific dynamically-generated element with Prototype/JS?
I'm looping through items from a database via PHP, attempting to call in an external form to edit each item when clicked. I've written Javascript based on the Prototype framework that gets me mostly there. However, when attempting to select the parent element of the clic开发者_运维百科ked item, after the first successful edit, subsequent edits fail and the first edited element's content is replaced with the last item clicked.
In otherwords, I have a list like this:
A B C
After clicking "A" and changing it to "1" via my external form, subsequently selecting "B" and changing it to "2" results in the following:
2
C
With the contents of the second item (B or 2) replacing the contents of the first item (a or 1.)
Please note that this is not a problem with my PHP external form (refreshing the page will display all of my updated values properly.) My issue is with javascript selecting the correct parent element in which to display the results of my post.
(As an interesting side note, when I click through and change my elements starting at the bottom of the list, none of the elements are overwritten and the page functions as it should.)
function inlineEditor() {
$$('div.form span.status').each(function(elm){
elm.observe('click',function(evt){
Event.stop(evt);
var block = this.up('div.form');
var item = block.id;
new Ajax.Updater(block,'status_types_edit.php',{
parameters:{id:item},
evalScripts:true
});
});
});
}
<body onload="inlineEditor();">
<?php do { ?>
<div class="form" id="<?php echo $row_GetStatus_Types['id']; ?>">
<span class="status"><?php echo $row_GetStatus_Types['status_name']; ?></span>
</div>
<?php } while ($row_GetStatus_Types = mysql_fetch_assoc($GetStatus_Types)); ?>
What does "this" evaluate to at run time? Instead of
var block = this.up('div.form');
try getting the element from the event:
var block = $(Event.element(evt)).up('div.form');
加载中,请稍侯......
精彩评论