javascript - 单击按钮时 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
  });
});