Jquery - load（）多次

Question

我有以下代码：

<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>   

以上是多个横幅广告

我想在DIV form_interested中加载一个表单文件，只有在单击按钮btn_interested时才会显示。

注意：每个横幅广告都有一个btn_interested按钮。

我尝试了这个JQuery脚本，但在所有横幅广告上形成了加载：

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

Answer 1

更改为类，然后在点击处理程序中隔离每个实例：

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');
});