Observing events on injected elements using prototype

Posted by snaken on Stack Overflow See other posts from Stack Overflow or by snaken
Published on 2010-06-08T14:49:02Z Indexed on 2010/06/08 14:52 UTC
Read the original article Hit count: 457

I asked a question previously, it was answered correctly in the form i asked it but realised now why it wasnt working for me.

i have this code to observe multiple select menus:

$('product_options').select('select').invoke("observe","change",optchange); 

This does work - as pointed out - with static layout like this:

<html> 
  <head> 
    <title>optchange</title> 
    <script type="text/javascript" src="prototype.js"></script> 
  </head> 
  <body> 
    <div id="product_options"> 
      <select id="o0"> 
        <option>1</option> 
        <option>2</option> 
      </select> 
      <select id="o1"> 
        <option>1</option> 
        <option>2</option> 
      </select> 
      <select id="o3"> 
        <option>1</option> 
        <option>2</option> 
      </select> 
    </div> 
    <script type="text/javascript"> 
      function optchange(e) { 
        alert("optchanged"); 
      } 
      $('product_options').select('select').invoke("observe","change", optchange); 
    </script> 
  </body> 
</html> 

But in my context, making a selection in the first select menu fires of an Ajax.Updater that completely replaces the content of Select 2 - this is killing the event observer. Is there a way to fix this without having to apply a new event observer each time?

Thanks.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about javascript-events