Jquery - load() multiple times

Question

I have the following code:

<div class="banner_large">
    <h4 class="titulo">Text</h4>
       <div class="block_text_banner">
           TEXT TEXT TEXT                
             <a href="javascript:void(0)"
             class="btn_interested btn btn-primary">I'm Interested</a>
        </div>
        <div class="form_interested"></div>
</div>


<div class="banner_large">
    <h4 class="titulo">Text</h4>
       <div class="block_text_banner">
           TEXT TEXT TEXT                
             <a href="javascript:void(0)"
             class="btn_interested btn btn-primary">I'm Interested</a>
        </div>
        <div class="form_interested"></div>
</div>


<div class="banner_large">
    <h4 class="titulo">Text</h4>
       <div class="block_text_banner">
           TEXT TEXT TEXT                
             <a href="javascript:void(0)"
             class="btn_interested btn btn-primary">I'm Interested</a>
        </div>
        <div class="form_interested"></div>
</div>

Above are multiple banner ads

I want to load a form file, within the DIV form_interested only when the button btn_interested is clicked.

Notice: Each banner ad have a btn_interested button.

I tried this JQuery script but form loads on all banner ads:

<script>
 $(document).ready(function(){
    $( document ).on('click', ".btn_interested", function(){
      $('.form_interested').load('form_interested.html');
    });
 });
</script>

Having multiple DOM elements with the same ID will cause unpredictable effects, since IDs are expected to be unique. Use a different selector type, such as class or tag. — nullability, Nov 28 '13 at 17:15
Do you really need directions on how to not type the same ID multiple times on the same page? You're already using classes, so you obviously understand the concept, and ID (unique identifier) is intended to be used once, and once only, while a class strangely enough can be used to group a number of elements, so a class can be used multiple times. jQuery (more accurately javascript) actually stops looking for more elements once the first element is found when using a ID, as there shouldn't be any other elements with that same ID. — adeneo, Nov 28 '13 at 17:21

score 0 · Accepted Answer · answered Nov 28 '13 at 17:21

Change to classes, then isolate each instance within click handler:

HTML

<div class="banner_large">
    <h4 class="titulo">Text</h4>
       <div class="block_text_banner">
           TEXT TEXT TEXT                
             <a href="javascript:void(0)" 
             class="btn btn-primary btn_interested">I'm Interested</a>
        </div>
        <div class="form_interested"></div>
</div>

JS

$( document ).on('click', ".btn_interested", function(){
   /* "this" is current button, look up to parent, then find element within parent to load*/
     $(this).closest('.banner_large').find('.form_interested').load('form_interested.html');
});

remember that pattern for isolating instance...will use it often — charlietfl, Nov 28 '13 at 17:36

Jquery - load() multiple times

1 Answers1