javascript - Jquery从动态元素中获取id或类

Question

假设我有来自PHP 查询的 5 个元素（所以它是动态的）如下图所示：

element 1 class=element id=id_1
element 2 class=element id=id_2
element 3 class=element id=id_3
element 4 class=element id=id_4
element 5 class=element id=id_5

我们通过知道他们的class或id来使用jquery 事件，但在这种情况下，我们并不确切知道他们的id。

$("#id_3").click(function()
{ 
    //in this case we have known we want to add event when we click id_3
});

如何处理来自PHP 查询的动态元素？
例如，我们怎么知道我们点击了element 3with id_3？
我们必须填写$(????).click();什么？
当我使用类时，我怎么知道我从点击的类中引用了哪个id？

Answer 1

这是我让它工作的唯一方法。例如，如果您想获取属性 ID 或已单击元素的值...

$("containerElem").on("click", "someElemID", function(evt) {
    var getElemID = $(evt.target).attr("id");
    var getVal = $(evt.target).val();
});

Answer 2

在您的示例中，元素都具有相同的类，因此您可以基于此设置事件处理程序：

$(".element").click(function() {
   // "this" refers to the clicked element
   // this.id will be the id of the clicked element
});

或者，如果这些元素是动态的，在初始页面加载后的某个时间点通过 Ajax 加载，则使用委托事件处理程序：

$("somecontainerelement").on("click", ".element", function() {
    // do something with this.id
});

理想情况下，“somecontainerelement”是添加动态元素的元素，但也可以是document.

Answer 3

如果它们都具有相同的类，那么您可以使用类选择器。然后用它this来找到你想要的任何属性。

$('.element').click(
     $(this).prop('id');
); 

Answer 4

如果您只想添加单击，那么为什么不将其添加到服务器端生成的 html 中呢？

Answer 5

您可以使用attribute starsWith选择器 &on在动态创建的元素上绑定事件。

$('body').on('click', '[id^=id]', function(e){

});

Answer 6

当我们处理带有 id 或 class 的未知元素时，这非常有用

$( document ).ready(function() {
  // user this if element is div 
  $('div[id^="id_"]').on('click', function() {  
    alert($(this).attr('id'));
  });
  // user this if element is input
  $('input[id^="id_"]').on('click', function() {  
    alert(this.id);
  });

});