Extra click after dynamically added HTML elements via jQuery

I add some html dynamically in data.html

<div class="d-flex " id="deviceSeearchRecords">
  <div class="p-2 flex-grow-1 ">
    <button type="button" class="btn deviceName " data-href="@Url.Content(string.Format(" ~/Devices/Details/{0} ", @item.ID))">
        @item.FullName
    </button>
  </div>
</div>

After this I assume to use click event like this.

$('#searchResultContainer').html('');
$.getJSON('@Url.Action("Search", "Devices")', {
    s: $('#searchStr').val()
  },
  function(data) {
    if (data.success === true) {
      $('#searchResultContainer').append(data.html);
      $(document).on('click', '.deviceName', function(e) {
        e.preventDefault();
        e.stopPropagation();
        // console.log('deviceName ' + $(this).data('href'));
        window.location.href = $(this).data('href');
      });
    }
  });

But when I click first time then nothing happens. On second click it works as it should. I have tried to use focus() on div but if does not help.

This approach does not help as well jquery functions inside of dynamically generated html not working

What do I missing here?

Thanks to all!

I found my solution here Is it possible to focus on a <div> using JavaScript focus() function?

So I just use a regular <a> within data.html and after this focus on the div with dynamically added data. And one click works!

$('#searchResultContainer').html('');
$.getJSON('@Url.Action("Search", "Devices")', {
    s: $('#searchStr').val()
  },
  function(data) {
    if (data.success === true) {
       if (data.success === true) {
             $('#searchResultContainer').html(data.html);   
             window.location.hash = '#searchResultContainer';
        }
    }
  });