JQuery - Как прослушать кнопку изменения идентификатора и сбросить его реквизит после загрузки

Question

У меня есть кнопка отправки текстовой области в модальном режиме, и эта кнопка отключена, если текстовая область пуста. Код:

function textAreaListener() {
  if (!($(#text-area).val().trim())) {
    $('#submit-button').prop({ disabled: true });
  } else {
    $('#submit-button').prop({ disabled: false });
  }
}

Хорошо работает.

После этого я написал другой метод для вызова модального режима, и мне нужно изменить идентификатор кнопки, чтобы исходное событие нажатия не происходило, я использовал $('#submit-button').attr('id','batch-submit-button'); для изменения идентификатора кнопки и изменил функцию выше:

function textAreaListener() {
  if (!($(#text-area).val().trim())) {
    $('#submit-button').prop({ disabled: true });
    $('#batch-submit-button').prop({ disabled: true });
  } else {
    $('#submit-button').prop({ disabled: false });
    $('#batch-submit-button').prop({ disabled: false });
  }
}

И затем prop({ disabled: false }) не работает для кнопки с новым идентификатором (#batch-submit-button), но более старая кнопка со старым идентификатором работает хорошо. Я посмотрел пару вопросов в StackOverflow и думаю, причина в том, что JQuery не может перехватить новый идентификатор после загрузки. Есть ли способ решить это? Спасибо!

------------------ Вот мой хамл файл ------------------- -----------

#state-modal.modal
  .modal-dialog
    .modal-content
      .modal-header
        %h5#state-modal-title.modal-title
      .modal-body
        = form_for :proposal, url: '#', html: {id: 'state-modal-form'} do |form|
          = form.text_area :comment, id: 'text-area', |
          placeholder: t('.comment'), class: 'form-control', rows: 5
      .modal-footer
        %button.btn.btn-default{id: 'cancel-button', data: {dismiss: 'modal'}}= t('.cancel')
        %button.btn.btn-primary{id: 'submit-button'}= t('.done')

Точный случай:

$(function () {
  function initState() {
    $('#state-modal-form').attr('action', '#');
    $('#state-modal-form textarea').val('').hide();
    $('#submit-button').prop({ disabled: true });
  }

  function assignHandlersToElements() {
    $(document).on('click', '.commentable-element', App.books.bookCommentableElementHandler);
    $(document).on('keyup', '#state-modal-form textarea', App.books.textAreaListener);
    $(document).on('click', '#cancel-button', App.books.initState);
    $(document).on('click', '#submit-button', App.books.submitHandler);
  }

  function bookCommentableElementHandler(event) {
    event.preventDefault();
    if(event.target.id == 'selected-button'){
      $('#submit-button').attr('id','batch-submit-button');
      $('#text-area').show();
      $('#batch-submit-button').prop({ disabled: true });
    }else{
      $('#state-modal-form').attr('action', $(this).data('url'));

      $('#text-area').attr('placeholder', 'Comment').show();
      $('#text-area').show()
    }
    $('#state-modal').modal({ backdrop: 'static', keyboard: false }, 'show');
  }

  function textAreaListener() {
    if (!($(this).val().trim())) {
      $('#submit-button').prop({ disabled: true });
      $('#batch-submit-button').prop({ disabled: true });
    } else {
      $('#submit-button').prop({ disabled: false });
      $('#batch-submit-button').prop({ disabled: false });
    }
  }

  function submitHandler() {
    $('#state-modal-form').submit();
  }

  App.books.initState = initState;
  App.books.assignHandlersToElements = assignHandlersToElements;
  App.books.bookCommentableElementHandler = bookCommentableElementHandler;
  App.books.textAreaListener = textAreaListener;
  App.books.submitHandler = submitHandler;
  App.books.assignHandlersToElements();
  App.books.initState();
});

Answer 1

Я смоделировал ваш код на моей стороне. И проп ({отключено: ложно}); работает для кнопки изменения идентификатора. Вот мой код.

HTML:

<button id="submit-button">Submit</button>
<button id="disable_btn">Disable</button>
<button id="enable_btn">Enable</button>
<button id="change_id">Change ID</button>

jQuery:

$(document).ready(function(){
    $("#disable_btn").click(function(){
        $('#submit-button').prop({ disabled: true });
        $('#batch-submit-button').prop({ disabled: true });
    });

    $("#enable_btn").click(function(){
        $('#submit-button').prop({ disabled: false });
        $('#batch-submit-button').prop({ disabled: false });
    });

    $("#change_id").click(function(){
        $('#submit-button').attr('id', 'batch-submit-button');
    });
});

Пожалуйста, укажите ваш точный случай.