0

I have an input that makes an ajax call on onfocus and onblur. The returned result from that ajax call is formatted html which is then inserted into the DOM using innerHTML. How can I make sure that when I click this dynamically inserted button after onblur the click event on it fires immediately rather than having to click twice?

This is what the HTML looks like

<input type="text" id="c" onfocus="resetAllItems();" onblur="resetAllItems();">

<span id="readOnlySpan">
</span>

And here is the function resetAllItems:

function setInnerHTML (p_item,p_associated_div, p_return_value) {
// ... makes the ajax call and sets the result
// sets innerHTML like this
    var ajaxResult = '<button type="button" class="chip">Dynamic Button</button>';
    window[p_item] = ajaxResult;
  
    if ( window && window[p_item]) {
     if (p_associated_div && document.getElementById(p_associated_div))
   document.getElementById(p_associated_div).innerHTML=ajaxResult;
  if (p_return_value == 'true')
    return ajaxResult;
  }

}

var resetAllItems = function () {
        setInnerHTML('p_item1', 'readOnlySpan', 'true');
}

The click event is attached using event delegation

document.getElementById('readOnlySpan').addEventListener('click', function (e) {
if (e.target.nodeName == 'BUTTON') {
console.log('click');
}
});

I don't have access to setInnerHTML or resetAllItems but I understand that I can reassign it.

I have tried solution mentioned here but does not work for me: document.activeelement returns body

I have also tried this, but only works for links and not buttons:

var ref = resetAllItems;
resetAllItems = function () {
    ref.apply(this,arguments);
    var e = event;
    if (e.type == 'blur') {
        if (isNotNull(e.relatedTarget)) {
            if (e.relatedTarget.nodeName == 'A' || e.relatedTarget.nodeName == 'BUTTON') {
                console.log('click');
                e.relatedTarget.click();
            }
        }
    }
}

Edit: Just to make things clearer. I've edited the question to be more specific. I suspect that reason I have to click the button twice after onblur is becuase it does not get focus immidately. I've setup this jsFiddle to show what I mean.

Open the fiddle, focus on the input, then try to click on the button. The click event on it won't fire on first click.

Any help would be appreciated. Thanks.

ultra
  • 11
  • 5
  • `How can I make sure that when I click this dynamically inserted button after onblur it get focus instead of the body.` can you make this a little clearer please. Are you asking that when you click the button it should have the focus on it - because it should do by default...? – Rory McCrossan Jun 02 '21 at 10:04
  • I'm pretty sure op is referring to the problem, that his `onBlur` event prevents his dynamically added button from firing the first click event. When clicking your button, before your click event fires, the blur event fires, deleting the button, and adding it back again. Every click after that does not fire your blur event therefore the click is registerred. What are you trying to solve by adding the button not only on focus, but on blur too ? – Lapskaus Jun 02 '21 at 10:32
  • @Lapskaus Thanks for the input, that is what I meant. I don't have access that html which has the `onFocus` and `onBlur` attributes. The input is a search input, which `onBlur` calls `resetAllItems();` and fetches search results. – ultra Jun 02 '21 at 11:17

1 Answers1

0

I think you can use the focus() method It looks like that :

document.querySelector('button').focus()
Damien STEPHAN
  • 113
  • 1
  • 9