Extra click after dynamically added HTML elements via jQuery

Question

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?

you have a missing quote here `$.getJSON('@Url.Action("Search", "Devices", { s: $('#searchStr').val() },` — Roy Bogado, Nov 13 '19 at 07:03
@Roy Sorry Roy it is not the issue. It exists in the example code only. It has been corrected. — NoWar, Nov 13 '19 at 07:04
The click event on .deviceName is registered only after getJSON response is successfully parsed, so it is normal that clicking on that element before the call does nothing. — DanieleAlessandra, Nov 13 '19 at 07:09
Why are you attaching the click event to document inside the asynchronous function? — random, Nov 13 '19 at 07:09
@randomSoul I just try to figure out why I need to click twice. Initially I put it outside of async func but iwont work as well. — NoWar, Nov 13 '19 at 07:11
All the point of binding dynamic elements is that you can do it outside of the async function. If you want to bind it inside the callback function, you can bind it in the regular way. — Mosh Feu, Nov 13 '19 at 07:11
I simulated it myself and it works. It's my [jsfiddle](https://jsfiddle.net/bt3kLyr6/) — sugars, Nov 13 '19 at 07:12
@sugars Thanks man. You are right. It seems it has something to do with Bootstrap 4.3? Because even if no active elements have been inserted if I do right or left mouse clicks the entire area glimpses like it gets focus. — NoWar, Nov 13 '19 at 07:19
@Developer From the code you provide, it seems to be irrelevant to bootstrap — sugars, Nov 13 '19 at 07:25

score 0 · Answer 1 · answered Nov 13 '19 at 06:50

0

Move your code to the outside

$(document).on('click', '.deviceName', function(e) {
  e.preventDefault();
  e.stopPropagation();
  // console.log('deviceName ' + $(this).data('href'));
  window.location.href = $(this).data('href');
});

answered Nov 13 '19 at 06:50

sugars

1,473
7
17

I did. It does not help ((( And ieven if I use `` in the dynamically added HTML anyway I have to click twice to take an effect. – NoWar Nov 13 '19 at 06:54

score 0 · Accepted Answer · edited Dec 12 '19 at 18:19

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';
        }
    }
  });

Extra click after dynamically added HTML elements via jQuery

2 Answers2