layer弹窗不起作用

问题描述

大家好，我遇到一个问题，写了一个打开弹窗的代码，我看着是没有问题的，但是前端页面就是不弹窗。没有任何警告和报错。
代码的功能：点击一个按钮，然后弹窗。
前端按钮的代码：

<div class="layui-btn-container">
    <button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出1</button>
    <button name="btn2" id="btn2" class="layui-btn layui-btn-normal">居中弹出2</button>
</div>

预想效果，我点击第二个按钮 “居中弹出2”，就会弹出一个弹窗。
js代码：

<script type="text/javascript">
    layui.use(['element','util', 'layer'], function(){
	var element = layui.element;
	var layer = layui.layer;
	//触发事件
	console.log("client.js");
	$('#btn2').on('click', function(){
	    console.log("btn2");
	    layer.open({
		type: 1
		,offset: 'auto' 
		 ,id: 'btn2' //防止重复弹出
		 ,content: '<div style="padding: 20px 100px;"> hello layer </div>'
		,btn: ['关闭全部','知道了']
		,yes: function(){
			layer.closeAll();
		 }
		,btn2:function(){
			console.log("zhidaole");
		}
		});
	});
    });
</script>

大家看js代码，我在里面console.log了一个“client.js”和"btn2",这两个打印都可以在控制台正常显示，但是执行到layer.open这里就失效了。

上面两图显示了，点击按钮二之后，控制台打印了“btn2”，但是没有弹窗。

出错原因

layer里的id属性我设置的值是btn2，与html里按钮的id一样。这两个id不可以是一样的，会产生冲突。
为什么会产生冲突呢？不知道… 上面的原因是我根据现象总结出来的，也可能说的不准确。知道的大佬可以评论区告知，不胜感激！！

解决办法

把id的值改成别的，使其不要与按钮的id值一样。