jQuery的 - 負載（）多次

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_興趣按鈕。

我嘗試了所有橫幅廣告這個jQuery腳本，但形式負載：

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

Answer 1

更改爲類，然後找出click處理程序中的每個實例：

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