动态生成的DOM做点击事件无效

有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果。

例如:

<section>
        测试动态生成的DOM点击事件
        <br />
    </section>
        <script src="jquery-1.11.2.min.js"></script>
        <script>
            $(function () {
                $.ajax({
                    type: "post",
                    url: "Handler1.ashx",
                    data: {},
                    success: function (data) {
                        $("section").append(data); //把获取的标签动态添加到页面中
                    }
                })
            });
            $("#test").click(function () {
                alert("Smile");
            })
        </script>

生成页面,点击A标签无效果。

这里只介绍两种解决方法。

①把事件写在生成的字符串当中,感觉很low

里面什么方法名外面就声明一个(需要带参就传参)。

②我一般喜欢在JS里面直接写点击事件,不喜欢在标签里面写事件

我们直接写这个标签的点击事件是没效果的,我们就换个写法,利用On来完成。

这样也可以完成点击事件。

另附:a标签的href也是可以执行脚本的,点击事件也会执行脚本,点击事件优先,然后在执行href链接。

下载一般都是把A标签的Href给个一般处理程序的链接(参数就用?传值)。但我这个下载的参数是动态生成的,在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接

  //下载
        $("#uploadInfo").click(function () {
            var uids = "";
            $(":checkbox[name=‘A‘]:checked").each(function (i, item) {
                uids += $(item).attr("data-id") + ",";
            })
            if (uids === "") {
                NewAlertBox("warning","请最少选择一项",2000);
            } else {
                var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids;
                $(this).attr("href", urls);  //执行完了点击事件,把Href赋值,然后自动跳转href链接
            }

        });
时间: 2024-10-03 16:41:47

动态生成的DOM做点击事件无效的相关文章

js,css随笔(动态生成的dom做点击事件无效)

1.动态生成的DOM做点击事件无效   https://blog.csdn.net/mm_hello11/article/details/79010679 2.消除button的默认样式 margin: 0; padding: 0; border: 1px solid transparent; //自定义边框 outline: none; //消除默认点击蓝色边框效果 3. 键盘按下事件 $("#btn").keydown(function(event){ if(event.keyCo

jquery无法为动态生成的元素添加点击事件的解决方法

遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <div> <ul> <li> <span> <i class='icon'>这是元素内容</i> //i是动态生成 </span> </li> </ul> </div> 解决方法如下: $(docu

ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7等部分机型会出现该问题 我当时就是一惊,一般出现在事件上的问题都是疑难杂症.何况是跟键盘相关的. 我们都知道在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以.因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置

动态生成DOM元素绑定click事件无效问题

在页面里,jq动态生成dom节点,该节点的click事件无效. 如,html里动态添加class名为.del的<a>, js文件中: $('.del').bind('click',fuction(){ alert('sda'); }) 不响应, 网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件, 解决方法: on()事件 代码改为: $(document).on('click','.del',fuction(){ alert('sda'); }) 这样就搞定了

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效 Vue在渲染页面的时候使用jQuery的时候会发现当在created生命周期中获取后台数据,写在 mounted 生命周期的jquery渲染的点击事件不管用了. 理论上,mounted是界面html生成结束才会开始执行的,应该是可以的,但实际效果就是不行. 原因 问题的原因出现在,jquery确实在界面HTML生成之后执行了,但是当时向后台请求的数据还没请求回来,当请求回来用for循环重新渲染数据后,jquery已经执行完了,

Android 7.0 TextView点击事件无效修复方案

public class PostTextView extends TextView { private Handler handler = new Handler(Looper.getMainLooper()); public PostTextView(Context context) { super(context); } public PostTextView(Context context, AttributeSet attrs) { super(context, attrs); } p

ListView的item中有button和checkbox,listview的点击事件无效

ListView的item中有button和checkbox,listview的点击事件无效,解决办法: 在item布局文件中的根控件中添加属性设置: android:descendantFocusability="blocksDescendants" 如果只能点击checkbox,而无法触发item的点击事件,那么可以禁掉checkbox的焦点获取,不让它可以点击就可以了 checkbox里面加 android:focusable="false" android:

用到afinal注解的项目代码混淆后某些控件view点击事件无效问题

最近一个项目上线,要求代码混淆,可混淆后某些控件的点击事件无效,后来发现是afinal注解的问题.查了半天资料,后来又问了afinal的相关人员,他们给出的解决方案是排除混淆被注解的类,这样的话意味着基本所有的activity和fragment都不能混淆,这不是我想要的. 后来反编译代码比较排除被注解的类和不排除被注解类的区别,比较发现,那些不能点击的控件的定义代码被优化掉了,被优化掉的原因就是因为用注解后,在代码中该控件的实例没有其他地方用到,所以程序就认为该代码没有被用到,就被注视掉了. 知

layUi 模板引擎动态创建元素之后,绑定的事件无效了;

模板引擎动态创建元素之后,绑定的事件无效了: layUi 模板引擎动态创建元素之后,绑定的事件无效了: 可以在 模板引擎成功后  注册事件 原文地址:https://www.cnblogs.com/lpp-11-15/p/12264046.html