javascript - 无法在 IE11 中点击以下图片触发事件

Question

我正在动态生成一个包含一些文本和图像的按钮。我希望当我点击图像以外的任何地方的按钮时，任务 A 应该执行，当我点击图像时，任务 B 应该发生。但就我而言，即使我点击图片，也只有任务 A 正在发生。

我正在使用 jquery。这是按钮的外观。按钮内部包含一个标签，标签包含右侧的文本和图像。

以下代码用于创建按钮和图像代码创建按钮

    newTier1 = document.createElement('button');
    newTier1.className = 'col-md-12 btn btn-light dept-list';
    newTier1.style.cursor = 'pointer';
    newTier1.style.textAlign = 'justify';
    newTier1.innerHTML = '<label>' + tier1list[i].companyDeptName + 
    '</label>';

创建图像的代码

    img = document.createElement('img');
    img.src = '../images/head.jpg';
    img.className = 'image-responsive direct-search';
    img.style.width = '40px';
    img.style.height = '40px';
    img.style.cssFloat = 'right';

    newTier1.appendChild(img);

点击按钮时的事件代码:

$(document).on('click', 'button.dept-list', function (e) {
  // TASK A
})

对于图片事件点击，我尝试了 2 种方法，都没有用:

(1)生成图片时添加函数

img.onclick = function () {
    // TASK B
}

在上述情况下，生成的 HTML 中不存在 onclick 属性

(2)jquery

$(document).on('click','img.direct-search', function(){
    // TASK B
})

任务 A 在这两种情况下都会发生，程序甚至没有进入第二个选项。

在 chrome 上运行良好。如有任何疑问，请告诉我。任何帮助表示赞赏。谢谢。

newTier1 = document.createElement('button');
newTier1.className = 'col-md-12 btn btn-light dept-list';
newTier1.style.cursor = 'pointer';
newTier1.style.textAlign = 'justify';
newTier1.innerHTML = '<label>companyDeptName</label>';

img = document.createElement('img');
img.src = '../images/head.jpg';
img.className = 'image-responsive direct-search';
img.style.width = '40px';
img.style.height = '40px';
img.style.cssFloat = 'right';

newTier1.appendChild(img);

document.body.appendChild(newTier1)

$(document).on('click', 'button.dept-list', function(e) {
  console.log("TASK A")
})
$(document).on('click', 'img.direct-search', function() {
  console.log("TASK B")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我最初问过这个问题。

我通过简单地使用

解决了这个问题

<a> 

代替

<button>

这个:

newTier1 = document.createElement('a');

代替:

newTier1 = document.createElement('button');

现在它将内部图像识别为一个单独的元素。