綁定點擊事件在動態創建的元素中不起作用

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按鈕上添加click事件。

我已經在使用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>");

動態生成元素時，請使用.on（）委托事件方法使用事件委托

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

由於標識符必須唯一，因此請使用類。

Answer 2

您需要更改兩件事：

1. 正確的報價。
2. 將ID更改為class。

---

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

因為您處於循環狀態，並且您正在復制相同的ID。

將事件綁定更改為class：

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