Question

我打电话给ajax，成功时我建立了按钮元素。像这样：

...
    .done(function(data) {
                $('#data-message').empty();
                // console.log(data);
                $('#total_notification_msg').html(data.total);

                $.each(data.data, function(index, value) {
                  // console.log(value);
                  var redirectRead = '{{ route("adm1n.message.show", ":id") }}'
                  redirectRead = redirectRead.replace(":id", value.id);

                  var pesan = value.message.substr(0,100);

    $('#data-message').append('<button id='reply' class='btn btn-default btn-xs' style='margin-top:5px;'>Reply</button>");
                });
              })
    ...

但是，我无法在#reply按钮上添加点击事件。

我已使用on或click事件：

$(document).on('click', '#reply', function() {
     alert('Reply here');
});

// or this ...

$('#reply').click(function() {
     alert('Reply here');
});

但它仍然不起作用。

请帮助，谢谢^^

Answer 1

使用字符串创建元素时，需要正确使用引号。

$('#data-message').append('<button class="reply btn btn-default btn-xs" style="margin-top:5px;">Reply</button>");

在动态生成元素时，使用Event Delegation委托事件方法.on()

$('#data-message').on('click', '.reply', function() {
     alert('Reply here');
});

由于标识符必须是唯一的，所以请改用class。

Answer 2

你需要改变两件事：

正确引用。
将id更改为class。

$('#data-message').append("<button class='btn btn-default btn-xs reply' style='margin-top:5px;'>Reply</button>");
//-----------------change here-----------------------------------^^^^^

因为你处于循环中并且你正在复制相同的ID。

将您的事件绑定更改为类：

$(document).on('click', '.reply', function() {
     alert('Reply here');
});

绑定点击事件在动态创建的元素中不起作用

2 个答案: