追加后从 HTML 标签获取 id 值

Question

我用 append() 创建了一个按钮

var $itembtn = $('<figure data-groups=\'["'+ group +'"]\'>
            <button class="loadmorebtn" id="'+ group +'">Load more items '+ group  +'</button>
        </figure>');
$grid.append($itembtn);

按钮已创建。

<button id="graphics" class="loadmorebtn">Load more items graphics</button>

之后我想得到它的id。

 function() {
        $('.loadmorebtn').on('click', function() {
         alert(this.id); 

 },

id为空

如果将按钮直接放在 html 中，这有效。

Answer 1

$(document).ready(function(){
    $(document).on('click','.loadmorebtn',function(){
       //code here
       //alert(this.id);
       alert($(this).attr('id'));
    });
});

Answer 2

试试这个：

JQUERY .on() 方法

如前所述，按钮是动态附加字段。

在初始加载期间它不在 DOM 中，这就是您无法获取 ID 的原因。

你应该使用jQuery .on()方法来获取id。

$(document).ready(function(){ 
   $('body').on('click','.loadmorebtn',function().                     {
      alert($(this).attr('id'));
  }); 
});

你也可以使用 alert(this.id);

希望对您有所帮助。

Answer 3

按钮正在动态添加到 DOM。您需要使用事件委托。

var $itembtn = $('<figure data-groups=\'["'+ group +'"]\'>
                 <button class="loadmorebtn" id="'+ group +'">Load more items '+ group +'
                 </button></figure>');
$grid.append($itembtn);

$itembtn.on('click', 'button', function(){
    console.log(this.id);
});

追加后从 HTML 标签获取 id 值

Get id value from HTML tag after append

jquery

dynamic

event-handling