如何對我的單擊功能進行條件顯示和隱藏模態

Question

我有顯示和隱藏模態的問題，所以當我單擊表數據內的輸入數字時為何仍顯示模態，我有一個功能，當我更改輸入數字的值時，模態將隱藏。

因此，在下面，我將向您展示我擁有的代碼，

首先我有附加功能來附加表內的所有數據

$('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");

現在，當我單擊每個表格行時，第二個將顯示模式，

    $('#edit_chainingBuild').on('click','tr.clickable-row',function(e){

      $('table#edit_chainingBuild tr').removeClass('selected');
      $(this).addClass('selected');

      var find_each_id_will_update = $(this).find('.data-attribute-chain-id').attr('data-attribute-chain-id');
      $('.id_to_update_chain').val(find_each_id_will_update);

      $('#EditcondimentsBuilderModal').modal('show');

});

這兩個的輸出是這樣的，

現在在第二種情況下，當我更改“輸入數字數量”的值時，我想停止該id為的模態打開。

$('#EditcondimentsBuilderModal').modal();

我的更改數量的密碼是這樣的。

   $(document).on('change', '.changeQuantity', function() {
  // Does some stuff and logs the event to the console

      alert($(this).val());

      $("#EditcondimentsBuilderModal").modal('hide');
});

變化量的輸出正常工作，問題是如果我更改數量模態的值將不顯示條件，

Answer 1

您的隱藏代碼看起來還不錯，因此應該隱藏#EditcondimentsBuilderModal 。 但是接着是您的$('#edit_chainingBuild').on('click','tr.clickable-row', ...處理程序試圖在單擊時再次顯示它，因此很容易導致奇怪和混亂的行為，例如，如果您用鼠標將輸入字段聚焦，則在更改之前（有效地觸發打開和關閉的兩個處理程序）。

考慮至少暫時更改兩個處理程序中任何一個的邏輯，以確認情況。