单击按钮时 JS 功能未命中

Question

我有一个按钮，我试图通过点击“复制”来触发下面的功能。 你能指导我正确的方法吗？

目前，当我点击什么都没有发生！ 没有回应。 我需要在点击时触发该功能。

提前致谢

JS

$(document).on('click', '.js-duplicateRoom', function (e) {
            var hiddenInput = $(this).parent().find('input[name="roomId"]');
            var roomId = hiddenInput.data('id');
            var type = 'duplicate';

            $.ajax({
                type: "GET",
                url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type,
            }).done(function (result) {
                $('#addRoomResult').html(result);
                // Hide Add Room Button
                $('#addNewRoom').hide();
                $('#backToDetails').hide();
                $('#nextPropertyExtras').hide(); // Next button
            });
        });

HTML

<div class="modal fade" id="duplicateModal" tabindex="-1" role="dialog" aria-labelledby="duplicateModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="duplicateModalLabel">Confirm Duplicate</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you would like to duplicate this Room?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="js-duplicateRoom" >Duplicate</button>
            </div>
        </div>
    </div>
</div>

Answer 1

按钮由 ID 标识，而不是类。 所以试试这个：

 $(document).on('click', '#js-duplicateRoom', function(e) { var hiddenInput = $(this).parent().find('input[name="roomId"]'); var roomId = hiddenInput.data('id'); var type = 'duplicate'; $.ajax({ type: "GET", url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type, }).done(function(result) { $('#addRoomResult').html(result); // Hide Add Room Button $('#addNewRoom').hide(); $('#backToDetails').hide(); $('#nextPropertyExtras').hide(); // Next button }); });