jquery .load（）僅加載第一個請求

Question

我將使其簡單化：

我有：

<a id="edit" data-link="mylink">Edit</a>
<a id="edit" data-link="mylink2">Edit2</a>
<div id="modal">

</div>

<script>
    $('#edit').click(function(){
        var href = $(this).data('link');
        $( "#modal" ).load( href );
    });
});
</script>

它有效，但僅適用於第一個按鈕，不適用於第一個請求，僅適用於第一個按鈕，它可能是第10個請求，僅第一個按鈕加載，其他按鈕不加載，我檢查了鏈接和工作。

Answer 1

元素的ID必須唯一。

ID-屬性

id屬性指定其元素的唯一標識符（ID）。 該值在元素的主子樹中的所有ID中必須唯一，並且必須至少包含一個字符。 該值不得包含任何空格字符

使用類屬性對相似元素進行分組

<a class="edit" data-link="mylink">Edit</a>
<a class="edit" data-link="mylink2">Edit2</a>

然后使用class selctor

$('.edit').click(function(){
        var href = $(this).data('link');
        $( "#modal" ).load( href );
    });
});

當您使用id-selector時，它將獲取具有給定id的第一個元素，因此您的點擊處理程序將僅注冊到第一個鏈接元素

Answer 2

<a **id="edit"** data-link="mylink">Edit</a>
<a **id="edit"** data-link="mylink2">Edit2</a>

此處重復id 。 ID必須是唯一的。

Answer 3

當您使用ID選擇器進行選擇時，jQuery將僅返回一個元素，因為ID在頁面上必須唯一。 因此，只有一個href被加載。 您必須按以下方式將選擇器更改為類選擇器。 請注意，這兩個鏈接現在具有不同的ID，並且具有相同的類。 多個元素可以具有相同的類，並且jQuery選擇器將返回具有該特定類的所有元素（在這種情況下為“ editLink”）

<a id="edit1" class="editLink" data-link="mylink">Edit</a>
<a id="edit2" class="editLink" data-link="mylink2">Edit2</a>
<div id="modal">

</div>

<script>
    $('.editLink').click(function(){
        var href = $(this).data('link');
        $("#modal").load( href );
    });
});
</script>