如何对我的单击功能进行条件显示和隐藏模态

Question

I have problem to my show and hide modal,So when i click the input number inside of table data the why the modal still showing, I have a function which when i change the value of input number , the modal will hide.

So here below, I will show you the codes I have,

First I have append function to append all data inside of table

$('#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>");

Now Second when i click each table row, modal will show,

    $('#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');

});

The output of that two is this,

Now here in my second scenario, When i change the value of Input number quantity, I want to stop the modal to open which the id is this.

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

My Codes for changing the quantity is this.

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

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

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

The output of changing quantity is working, The question is I want to have condition if i change the value of quantity modal will not show,

Answer 1

Your hiding code seems ok, so it should be hiding #EditcondimentsBuilderModal . But then there's your $('#edit_chainingBuild').on('click','tr.clickable-row', ... handler that attempts to show it again on click. So it can easily result in a weird and confusing behavior, if you for example focus an input field with the mouse, before changing it (effectively triggering both handlers that is - open and close).

Consider altering the logic for either of the handlers, at least temporarily - to confirm the case.