Show/Hide inputs, and selecting approproate inputs

Question

I have a row of links, and depending on which one is clicked, a certain file gets loaded inside the "main" #DIV_main area where things are seen/clicked/viewed. The HTML file, say HOME.HTML is:

HOME.HTML 
<DIV id="DIV_TOP_LINKS">
    <a class="nav_links" id="a_a" href="File_one.php">one</a>
    <a class="nav_links" id="a_b" href="MAIN_UI.php">MAIN</a>
    <a class="nav_links" id="a_c" href="File_two.php">two</a>
</DIV>                      

<DIV id="DIV_main ">                
            <!-- files MAIN_UI.php, File_one/two.php etc go here -->        
</DIV>

the Javascript is:

$(document).ready(function(){   
        $("#DIV_TOP_LINKS a").click(function(e){    
                e.preventDefault(); 
                $("#DIV_main").load(e.target.href); 
                });

        $("#BTN_a").click(function(e){   //these dont work
                alert("helo a"); 
                });     

        $("#BTN_c").click(function(e){   //these dont work
                alert("helo b"); 
                });
});

function CH_ANGE(th, txt)
{   switch(txt) 
    { case "a_click":
            $("#DIV_A_inputs").show();          
            $("#DIV_B_inputs").hide();          
            $("#DIV_C_inputs").hide();          
            break;
            
      case "b_click":
            $("#DIV_A_inputs").hide();          
            $("#DIV_B_inputs").show();          
            $("#DIV_C_inputs").hide();          
            break;
            
      case "c_click":
            $("#DIV_A_inputs").hide();          
            $("#DIV_B_inputs").hide();          
            $("#DIV_C_inputs").show();          
            break;
}

MAIN_UI.php file is as follows:

        <div id="DIV_post_type">                     
             <div id="BTN_a" onclick="CH_ANGE(this, 'a_click')">Button A</div>     
             <div id="BTN_b" onclick="CH_ANGE(this, 'b_click')">Button B</div>      
             <div id="BTN_c" onclick="CH_ANGE(this, 'c_click')">Button C</div>
                            
             <button id="BTN_Post_Wall" onClick="POST_AJAX_INP_to_PHP_BUTTON()">POST</button>
        </div>

        <div id="DIV_abc">
                <div id="DIV_A_inputs">Div_A and other content
                     <input TYPE="TEXT" ID="inp_A" NAME="INP_A">                
                </div>
                
                <div id="DIV_B_inputs">Div_B and other content
                     <input TYPE="TEXT" ID="inp_B_1" NAME="INP_B_1">                     
                     <input TYPE="TEXT" ID="inp_B_2" NAME="INP_B_2">                     
                     <input TYPE="TEXT" ID="inp_B_3" NAME="INP_B_3">                     
                </div>
                
                <div id="DIV_C_inputs">
                     <input TYPE="TEXT" ID="inp_C_1" NAME="INP_C_1">
                     <input TYPE="TEXT" ID="inp_C_2" NAME="INP_C_2">
                </div>
        </div>          

So the issues which I do not know how to implement are:

If you see the $(document).load function, there are 2 more event handlers for $("#BTN_a").click and $("#BTN_c").click. These two did not work, and then I thought its because essentially, they are 'linked' when the document HOME.HTML loads. The items BTN_a and BTN_c will only be there on the main page if the "MAIN" link click triggers a load of file MAIN_UI.php inside the #DIV_main. Is there a way to link $(document).load functions to elements which will arrive later on the page? or another $(something).load function in jquery I can use?

Thanks a ton in advance.