Javascript Ajax JQuery

Question

Hello evryone.

Here's my issue.

I have a javascript function that update a div when i click the proper link. And it is working.

Since i have cliked the link my div content is updated with another Javascript. This time to close it.

Its fairly simple but i cant get it to work and i dont know why!

Here is the code that is in the page when it load for the first time

The div id config_window

<div id="config_window" class="config_window">
<div id="conception" class="conception">Conception et design graphique <a href ="http://url"&gt;Zéro Gravité.</a>
</div>
<div id="admin_btn"class="admin_btn"><a href ="#">administration.</a></div>
<div id="test">test</div>
</div>

Now the Javascript that call for the update inside that div

<script language="javascript" type="text/javascript">

 $("#admin_btn").click(
     function(){

     $('#config_window').addClass('config_open');
       config_set('config_window','open','var')
    }

    );

</script>

So far it's working my div is getting updated and i see the new content. The new content is

<div id="conception" class="conception">Conception et design graphique <a href ="http://zedproduction.com"&gt;Zéro Gravité.</a>
</div>
<div id="admin_btn_x" class="admin_btn"><a href ="#">Terminer.</a></div>

<script language="javascript" type="text/javascript">
    $("#admin_btn_x").click(
     function(){
     $('#config_window').removeClass('config_open');
       config_set('config_window','close','var')
    }
    );
</script>

i was expecting that same function to work but its not!! and i dont get why since the first one is.

Could it be becuse my second script is in the div that get updated??

Thanks!

Answer 1

I suspect it's because the element that the second handler is supposed to apply to doesn't exist until after the DIV is updated and the function applying the handler is executed before the DIV is updated -- therefore the handler is not applied. You might want to try using the live handlers for the click event so that it will apply to all elements matching the selector no matter when the element is added. You can add both handlers on page load and they will apply to the elements with those ids whether they are added dynamically or not.

<script type="text/javascript">
    $("#admin_btn").live('click', function(){
       $('#config_window').addClass('config_open');
       config_set('config_window','open','var')
    });

    );
    $('#admin_btn_x').live('click', function() {
       $('#config_window').removeClass('config_open');
       config_set('config_window','close','var')
    });
</script>

Answer 2

Is there a reason you add divide the function into two scripts? I would change your script to something like this:

    <script type="text/javascript">
     $(document).ready(function() {
      $('#config_window').hide(); // just in case
      $('#admin_btn').bind("click", function() {
       if($('#config_window').is(':hidden')){
        $('#config_window').show();
                  config_set('config_window','open','var')
       } else {
        $('#config_window').hide();
                config_set('config_window','close','var')
       }    
      }); 
     }); 
    </script>