jQuery-append添加元素click无效

很久没有使用jQuery,做项目的时候遇到一个小问题就是网页加载之后的append的元素是可以执行click事件,网页加载完成之后的,再次append的元素不执行click事件,简单的通过ul模拟一下:

    <ul class="content">
    </ul>
    <span class="test">测试</span>

三种不同的点击方式,append之后的click无效,通过on执行,注意参数:

  $(function() {
        $(‘.content‘).append(‘<li>FlyElephant</li>‘);

        $(‘.content li‘).click(function(event) {
            console.log(‘博客园-FlyElephant‘);
        });
        $(‘.content li‘).on(‘click‘, function() {
            console.log(‘博客园-FlyElephant‘);
        });
        /*通用*/
        $(document).on(‘click‘, ‘.content li‘, function() {
            console.log(‘keso‘);
        });

        $(‘.test‘).click(function() {
            $(‘.content‘).append(‘<li>keso</li>‘);
        });
    });

jQuery版本2.1.4~

时间: 2025-01-01 11:20:10

jQuery-append添加元素click无效的相关文章

jquery ajax添加元素事件无效,each,on函数参考

//页面离开时候发生$(function(){ $(window).on('beforeunload',function(){//on是打开, return '离开页面后你的订单不将保存,确定离开吗?'; });}); //添加,没数据的时候$('.add_cart_list').on('click','.no_add>a',function () { $('.dell').hide(); $('.add_cart_list').hide();}) //each $(".cart_sele

处理jQuery append加入的元素 绑定事件无效的方法

通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(function(){})是没有效果的. 解决方法:用on函数 一直以为on函数只有2个参数 正确格式: $("outerSelector").on('eventType','selector',function(){}): outerSelector 是一个一直存在的DOM, selector是你要

JQuery:添加元素

JQuery:添加元素通过 jQuery,可以很容易地添加新元素/内容.添加新的HTML内容.我们将学习用于添加新内容的四个jQuery方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 1.jQuery append() 方法jQuery append() 方法在被选元素的结尾插入内容.实例:$("p").append("追加文本&

【javascript】JQuery动态添加元素

JQuery动态添加元素方法 append() 在父级最后追加一个子元素  appendTo() 在父级最后追加一个子元素  prepend() 在父级最前面追加一个子元素  prependTo() 在父级最前面追加一个子元素   after() 在当前元素之后追加(是同级关系)  before() 在当前元素之前追加(是同级关系)  insertAfter() 将元素追加到指定对象的后面(是同级关系 insertBefore() 将元素追加到指定对象的前面(是同级关系)    appendCh

jquery append()方法与html()方法用法区别

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容. 定义和用法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(content) 使用函数来附加内容 使用函数在指定元素的结尾插入内容. 语法 $(selector).append(function(index,html)) 实例代码: <

jQuery动态添加元素无法触发绑定事件

用jquery动态添加元素后,发现给动态添加的元素无法触发事件.解决方案如下: 方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). 1 2 3 $(".newBtn").live("click",function(){ ///jquery 1.9(不包括1.9)以下可以                alert('这里是动态元素添加的事件');            }) 方法二:利用on()事件绑定 ($(ParentEle)

JQuery中的click重复执行现象

现象: 用jquery绑定的click事件,在第一次执行的时候执行了一次,在第二次执行的时候执行了两次,依次类推...第n次执行的时候,执行了n次. 原因: jquery绑定的click事件会在原基础的基础上进行追加,第二个click事件会追加到第一个click事件上,所以执行了两次 解决方法: 在进行click事件之前,对上一个click事件进行解绑. 代码如下: $(".aaa").unbind("click"); $(".aaa").bin

Jquery append 生成的新表单,手动输入修改后,无法获取html真实代码的解决方案

function doSubmit() { $('#T_form select').each(function(){ $(this).find(':selected').attr('selected', true); }); $("#T_form :text").each(function(){ $(this).attr('value', $(this).val()); }); $("#T_form :radio").each(function(){ $(this)

Selenium java中click无效

刚接触selenium,拿wordpress发布文章功能练习,输入文章标题.内容后点发布按钮,element.click()无效,能是找到了元素的,从脚本运行的现象看,感觉只是鼠标指针移动到了元素上,并没有执行click操作,相关代码如下: 尝试过的方法有: 查到一篇关于click()和submit()区别的帖子,说click()只能用于submit按钮,而submit()可以用于form中的所有element,包括form本身.于是修改代码为:form  submit,尝试无效 看到别人说过点