I have a button:

<button id="saveBtn" data-dismiss="modal" class="btn btn-primary save">Save</button>

When clicked, it induces an AJAX call and modifies the page:

  $('.tab-pane').on('click', 'button.save', function() {

      swot_type = $('#typeValue').val();
      label = $('#label').val();
      details = $('#details').val();

      $.ajax({
          url: '/add_swot_entry/',
          type: "POST",
          data: {
              'type': swot_type,
              'label': label,
              'details': details
          },

          dataType: 'json',
          success: function (data) {
              $("#strength-group").append(
                  '<li id='
                  + data.id +
                  ' class="list-group-item item-display">'
                  + data.label +
                  '</li>'
  );}});});

It also hides the bootstrap modal via the the data-dismiss hook.

This all works just fine, every time, except when I try to operate it with Selenium:

browser.find_element_by_id("saveBtn").click()

While the modal will still close every time, the custom Javascript will only execute every fourth or fifth time. Most of the time the page is unchanged and the server is not communicated with.

I've tried implementing a wait:

 wait.until(EC.element_to_be_clickable((By.ID, elm)))

But it doesn't seem to help. I've just upgraded to the most recent version of Selenium (3.3.3) and it's still having trouble. I am using Chrome on Windows 10.