页面标签元素动态添加出来，且位于<scrip>中，如何对标签进行事件监听

最新推荐文章于 2023-08-03 17:11:35 发布

*八步赶蝉*

最新推荐文章于 2023-08-03 17:11:35 发布

阅读量808

点赞数 2

本文链接：https://blog.csdn.net/qq_38261174/article/details/89514608

版权

当许多标签元素是通过js动态加载出来的话，不能通过选择器增加事件监听即使用了on()也不行，因为当页面加载出来时，该选择器也是无效的。
所以可以用一个在页面绝对会出现的标签元素body或其他来充当选择器，对其用事件on监听，在内部再增加对子元素的监听即可，
这里的子元素可以是未来标签元素，就解决了对未来标签元素的事件监听。

如下:

$('body').on('click',
                    '.check-btn',
                    function() {
                        var $this = $(this);
                        var data = {
                            userDynamicsId: $('#userDynamicsId').val(),
                            operatorName: $.cookie("@(LoginCookieKey.ManageUserKey)"),
                            facechatId: $("#newselectInsertFacechatList").val()
                        };
                        if ($this.hasClass('pass')) { //一个未来
                            data.status = 2;
                            checkPost(data);
                        } else if ($this.hasClass('refuse')) { //另一个未来
                            data.status = 3;
                            checkPost(data);
                        } else if ($this.hasClass('changechat')) { //另一个未来
                            console.log(1); 
                        }
                    });

标准：

$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。
有click等
由空格分隔多个事件值，也可以是数组。必须是有效的事件。

childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

data	可选。规定传递到函数的额外数据。

function	可选。规定当事件发生时运行的函数。

例子：
<script>
$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>

<div style="background-color:yellow">
<p>This is a paragraph.</p>
<p>Click any p element to make it disappear. Including this one.</p>
<button>Insert a new p element after this button</button>
</div>

</body>

可增加自定义事件,使用 trigger 触发,用法如下：

<script>
$(document).ready(function(){
  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});
</script> 
</head>
<body>

<button>Trigger custom event</button>
<p>Click the button to attach a customized event on this p element.</p>

</body>

*八步赶蝉*

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面标签元素动态添加出来，且位于<scrip>中，如何对标签进行事件监听

当许多标签元素是通过js动态加载出来的话，不能通过选择器增加事件监听即使用了on()也不行，因为当页面加载出来时，该选择器也是无效的。所以可以用一个在页面绝对会出现的标签元素body或其他来充当选择器，对其用事件on监听，在内部再增加对子元素的监听即可，这里的子元素可以是未来标签元素，就解决了对未来标签元素的事件监听。如下:$('body').on('click',...
复制链接

扫一扫