I add some html dynamically in `data.html`

```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.

```js
$('#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](https://stackoverflow.com/questions/32354020/jquery-functions-inside-of-dynamically-generated-html-not-working)

What do I missing here?