Jquery - 多次加载（）[关闭]答案

【问题标题】：Jquery - load() multiple times [closed]Jquery - 多次加载（）[关闭]
【发布时间】：2013-11-28 17:10:21
【问题描述】：

我有以下代码：

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

【问题讨论】：

ID 应该是唯一的。
在“具有相同 ID”处停止阅读？
拥有多个具有相同 ID 的 DOM 元素会导致不可预知的影响，因为 ID 应该是唯一的。使用不同的选择器类型，例如类或标签。
如果 ID 应该是唯一的，请给我一个指导。
您真的需要有关如何不在同一页面上多次键入相同 ID 的说明吗？您已经在使用类，因此您显然理解了这个概念，并且 ID（唯一标识符）旨在使用一次，并且只使用一次，而奇怪的是，一个类可以用于对多个元素进行分组，所以一个类可以可以多次使用。使用 ID 时，一旦找到第一个元素，jQuery（更准确地说是 javascript）实际上会停止寻找更多元素，因为不应该有任何其他元素具有相同的 ID。

标签： javascript jquery jquery-load

【解决方案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>

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

【讨论】：

感谢 Charlietfl ！效果很好！
记住隔离实例的模式...会经常使用它