时间戳

首页 > 解决方案 > 如何确保在ajax调用后触发动态插入按钮上的点击事件

javascript - 如何确保在ajax调用后触发动态插入按钮上的点击事件

问题描述

我有一个输入，可以在onfocus和上进行 ajax 调用onblur。该 ajax 调用返回的结果是格式化的 html，然后使用innerHTML. 如何确保在onblur单击事件后单击此动态插入的按钮时立即触发而不是单击两次？

这就是 HTML 的样子

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

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

这是功能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');
}

使用事件委托附加点击事件

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

我无权访问setInnerHTML或resetAllItems但我知道我可以重新分配它。

我已经尝试过这里提到的解决方案，但对我不起作用：document.activeelement 返回正文

我也试过这个，但只适用于链接而不是按钮：

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

编辑：只是为了让事情更清楚。我已将问题编辑为更具体。我怀疑我必须点击按钮两次的原因onblur是因为它没有立即获得焦点。我已经设置了这个jsFiddle来说明我的意思。

打开小提琴，专注于输入，然后尝试单击按钮。它的点击事件不会在第一次点击时触发。

任何帮助，将不胜感激。谢谢。

标签： javascriptjqueryajax

解决方案

我认为您可以使用该focus()方法它看起来像这样：

document.querySelector('button').focus()

推荐阅读