javascript - 设置动态生成的按钮“禁用”

Question

我有一个基于 WebSockets 的聊天应用程序。在每条消息旁边应该有一个评级按钮。我需要通过将相应的按钮设置为禁用来禁止 selfratings。问题是消息及其按钮是动态生成的，代码片段不起作用。

$(".btn").prop("disabled", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="btn">Click</button>

Answer 1

你必须打电话给

$(".btn").prop("disabled", true);

在动态生成的 html 片段插入到 DOM 树之后。

或者您在生成 html 节点时添加禁用权限。

<button class="btn" disabled>Click</button>

Answer 2

像这样的东西？http://jsfiddle.net/swm53ran/172/

<button class="add">Add</button>
<div class="section" id="template">
    This is a section
    <button class="rate">Rate This!</button>
</div>

$(document).ready(function() {
    $('.add').on('click', function(e) {
        e.preventDefault();
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.rate').prop('disabled', true);
        clone.appendTo('body');        
    });
});