layer弹框单页面content中加上事件出现的bug

博客讲述了在layer弹窗中遇到的一个bug，即在input标签内添加oninput事件后，点击页面链接会打开新窗口而非在当前后台管理界面。解决方案是将事件处理移至JS代码中，通过监听input元素的'input'事件来避免该问题。文中提供了两种不同的JS实现方式，并强调了在处理事件时需要注意的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的bug
在layer弹窗的content中绑定一段div代码，其中存在input，在input标签内部添加了一个oninput事件，如下图，在input中输入数字后，再点击左侧导航栏的其他链接，会打开一个新窗口显示而不在后台管理的mian框中显示

点击链接后打开一个新的窗口
在这里插入图片描述

html

<div id="motaikunag" style="display: none;">
	<div class="layui-tab-item layui-show">
		<div class="layui-col-md9">
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:120px;">手机或邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="name" id="name" value="" placeholder="请输入手机号或者邮箱号" maxlength="30" oninput="getname()" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
	</div>
</div>

layer的js

$('#tianjia').on('click', function() {
			$('.attr-tan').prop('hidden', true);
			$('.st_id').prop('hidden', true);
			layer.open({
				type: 1, //类型
				area: '80%', //定义宽和高
				title: '添加订单', //题目
				shadeClose: false, //点击遮罩层关闭
				content: $('#motaikunag'), //打开的内容
				moveOut: true,
				btn: ['关闭'],
				btn2: function() {
					layer.closeAll();
				}
			});	
		});

解决办法
不要在标签内部写事件，在js里面写
以下代码是写在layui.use内层

$('#name').on('input', function(e){
		$('.st_id').prop('hidden', true);
		if (e.delegateTarget.value.length == 11) {
			if (!(/^1[3456789]\d{9}$/.test(e.delegateTarget.value))) {
				$('.attr-tan').prop('hidden', true);
				return false;
			}

以上注意，必须使用e中的属性来进行判断，不能对e赋值给另一个变量然后判断，会报错，除此之外还可以用jq（这里一定要用立即执行函数才可以）
以下代码写在layui.use外层

$(function(){
$('#name').bind('input propertychange', function() {
$('.st_id').prop('hidden', true);
if ($(this).val().length == 11) {
			if (!(/^1[3456789]\d{9}$/.test($(this).val()))) {
				$('.attr-tan').prop('hidden', true);
				return false;
			}