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

我们通过了解类或 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 3 id_3？我们必须填写什么$(????).click();？当我使用类时，如何知道从单击的类中引用了哪些 id ？

Answer 1

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

$(".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 2

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

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

Answer 3

如果它们都具有相同的类，则可以使用类选择器。然后使用this查找您所追求的任何属性。

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

Answer 4

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

Answer 5

您可以使用attribute starsWith选择器＆amp; 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);
  });

});

Jquery从动态元素获取id或类

6 个答案: