I have a form that contains multiple tables, where in all but one
table have a button element in it with the same class attribute
"remove-site-button", which when clicked, should remove that table
that contains it.

Here is the basic gist of the html - yes it is made short:

  <script type="text/javascript" src="prototype.js"></script>
   <script type="text/javascript" src="myjs.js"></script>
        <table class="program-info">
          <tr><th>name:</th><td><input name="program-name"/></td></tr>
        <button id="add-site-button" type="button">add site</button>
        <table class="site-info">
          <tr><th>address</th><td><input name="site-address"/></td></
          <tr><td colspan=2><button class="remove-site-button"
type="button">remove this site</button></td></tr>
        <p><input type="submit"/></p>

Here's  my 'myjs.js' file:

document.observe("dom:loaded", function() {
    $('add-site-button').observe('click', function() {
        var lsi = $$('.site-info').last(); // get the last table with
classname of site-info
        var txi = lsi.innerHTML; // get the HTML inside the table tag
        var nsi = Object.clone(lsi); // clone the last table, so we
can get the top element later

        // check to see if the clone object is an element
        if (Object.isElement(nsi)) {
            // get the top element as text - TODO: there must be a
better way to pull the entire html for this out instead of adding it
in the next section
            var tx = Object.inspect(nsi);

            // add the new element header as text into the last site
info table
            lsi.insert({ after: tx });

            // since there is a new site-info table, we want to get
that element, and ...
            var rev = $$('.site-info').last();

            // insert the HTML inside of this table class into the new

    // listen to all click events on buttons with 'remove-site-button'
    $$('.remove-site-button').invoke('observe','click',function(eve) {
        var rsb = Event.element(eve).up('table').remove();

My question has to do with why the event listener at the end of my
javascript file does not 'listen' to the newly generated buttons in
the new 'site-info' tables. I am guessing it is because the new tables/
buttons were generated after the dom:loaded event at the document

I was looking for a dom:change event , but there does not seem to be a
feature like this in prototype. Is there a different way to listen to
any of the 'remove-site-info' buttons (newly generated or otherwise),
and enact a series of commands within the event listener?

I hope this all made sense.


You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to