精华内容
下载资源
问答
  • jquery给页面添加标签 for(var i=0;i<data.list.length;i++){ var $str=$("<tr id='delTr"+data.list[i].id+"'></tr>"); $("section>table").append($str) ...

    jquery给页面添加标签

    1.动态添加 没有判断的

    for(var i=0;i<data.list.length;i++){
                    var $str=$("<tr id='delTr"+data.list[i].id+"'></tr>");
                    $("section>table").append($str)
                    $str.append("<td>"+data.list[i].id+"</td>")
                        .append("<td>"+data.list[i].title+"</td>")
                        .append("<td>"+data.list[i].summary+"</td>")
                        .append("<td>"+data.list[i].uploaduser+"</td>")
                        .append("<td>"+data.list[i].createDate+"</td>")
                        .append("<td><a href='update.html?entryId="+data.list[i].id+"'>修改</a>" +
                            "<a href='#' id='del"+data.list[i].id+"' del='"+data.list[i].id+"'>删除</a></td>");
                }
    

    2.动态添加 需要有判断的

    function initPageInfo() {
                var role =$("#providerId").val();
                var queryProductName = $("#queryProductName").val();
                var queryProviderId = $("#providerId").val();
                var queryIsPayment = $("#isPay").val();
    
                if (queryProductName==""){
                    queryProductName=null;
                }
                if (queryProviderId==""){
                    queryProviderId=0;
                }
                if (queryIsPayment==""){
                    queryIsPayment=0;
                }
                console.log(queryIsPayment+queryProductName+queryProviderId);
                var params = "queryProductName="+queryProductName+"&queryProviderId="+queryProviderId+"&queryIsPayment="+queryIsPayment;
                console.log(params);
                $.getJSON("/provider/doBill",params,success);
                function success(data){
                    console.log("data==="+data);
    
                    $("#queryProviderId").html("");
                    for (var i=0;i<data.providerList.length;i++){
                        if (data.providerList[i].id==parseInt(role)){
                            $("#queryProviderId").append("<option selected ='selected' value='"+data.providerList[i].id+"'>"+data.providerList[i].proName+"</option>");
                        }else {
                            $("#queryProviderId").append("<option value='"+data.providerList[i].id+"'>"+data.providerList[i].proName+"</option>");
                        }
                    }
    
                    $("#providerTable tr:gt(0)").remove();
                    for(var i=0;i<data.billList.length;i++){
                        var $tr = $("<tr ></tr>");
                        $("#providerTable").append($tr);
                            var k = data.billList[i];
                        $tr.append('<td>'+data.billList[i].billCode+'</td>')
                            .append('<td>'+data.billList[i].productName+'</td>')
                            .append('<td >'+data.billList[i].proName+'</td>')
                            .append('<td>'+data.billList[i].productcount+'</td>')
    
                            if (data.billList[i].ispayment==1){
                            $tr.append('<td >已付款</td>')
                            }else if(data.billList[i].ispayment==2){
                            $tr.append('<td >未付款</td>')
                        }
    
                            $tr.append('<td>'+data.billList[i].creationdate+'</td>')
                            .append('<td><a href="http://localhost:8080/provider/updateBill?id='+data.billList[i].id+' "><img src="/statics/images/xiugai.png" alt="修改" title="修改"/></a>&nbsp;&nbsp;' +
                                '<a href="#" id="deleteId'+data.billList[i].id+'" deleteId="'+data.billList[i].id+'"><img src="/statics/images/schu.png" alt="删除" title="删除"/></a>' +
                                '<span><a class="viewUser" href="http://localhost:8080/provider/billView?id='+data.billList[i].id+' " ><img src="/statics/images/read.png" alt="查看" title="查看"/></a></span></td>');
                    }
                }
            }
    
    展开全文
  • 主要介绍了jQuery实现获取动态添加标签对象,涉及jQuery针对页面元素的动态添加、元素获取与事件响应相关操作技巧,需要的朋友可以参考下
  • 问题:在ajax中获取数据后为页面动态添加标签,点击标签时,无法执行jQuery的onClick方法原因:添加标签的方法在ajax方法内部,而jQuery的onClick方法在ajax方法的外部。解决办法:将添加标签的方法和onClick方法...

    问题:在ajax中获取数据后为页面动态添加

    标签,点击标签时,无法执行jQuery的onClick方法

    原因:添加

    标签的方法在ajax方法内部,而jQuery的onClick方法在ajax方法的外部。

    解决办法:将添加

    标签的方法和onClick方法同时放在ajax的内部或外部

    $.ajax({

    url:"/",

    type:"POST",

    dataType:"json",

    success:function(data){

    var resultData = data;

    /*遍历预定信息*/

    var venueInfo="";

    $.each(resultData.resultData.venueList,function (i,item) {

    venueInfo+="

    • "+item.venue_no+"号场";

    for(var i=startTime;i<=endTime;i++){

    if(i==10){

    venueInfo+="

    ";

    $(".fulled").attr("disabled","disabled");

    }else{

    venueInfo+="

    ";

    }

    }

    venueInfo+="

    ";

    });

    $("#venueInfo").html(venueInfo);

    /*在ajax内部为li标签绑定click事件*/

    $(".right_wrap ul li").on("click",function(){

    $(this).toggleClass("seled");

    });

    }

    });

    展开全文
  • 分享大家供大家参考,具体如下:jquery无法直接给网页里面动态添加点击事件,并且获取到对象一般来说,js获取动态添加的组件都是自定义给标签添加上onclick属性来达到调用,这是普通的方法,如...

    这篇文章主要介绍了jQuery实现获取动态添加的标签对象,涉及jQuery针对页面元素的动态添加、元素获取与事件响应相关操作技巧,需要的朋友可以参考下

    本文实例讲述了jQuery实现获取动态添加的标签对象。分享给大家供大家参考,具体如下:

    jquery无法直接给网页里面动态添加点击事件,并且获取到对象

    一般来说,js获取动态添加的组件都是自定义给标签添加上onclick属性来达到调用,这是普通的方法,如下:

    onclick方式获取

    www.jb51.net jQuery动态获取事件

    var html="";//声明变量用于存放html

    for (i=0;i<=10;i++){

    html=html+"按钮"+i+"";

    }

    $('#test').html(html);

    function btnclick(e) {

    console.log(e.textContent);//获取按钮文本

    }

    如今jquery已经到了3版本了,官方已经放弃live方式了,推荐使用on方法。语法为

    $('选择器').on('click','选择类型',function (e){代码段}

    jquery不能动态获取到网页里面的标签,需要先获取到网页固定的标签,让后再获取里面其他的标签,所以,如上面代码中的id为test的p是固定不变的。

    www.jb51.net jQuery动态获取事件

    var html="";//声明变量用于存放html

    for (i=0;i<=10;i++){

    html=html+"按钮"+i+"";

    }

    $('#test').html(html);

    $('#test').on('click','button',function (e){

    console.log($(this));

    });

    b61475906a012bd5a9ca0561c2763ad9.gif

    这样写就非常简单了,其中选择类型里面的button还可以进一步限制,如:button[class=test],就是选择动态创建的类为text的按钮。

    要实现单双数只需要在test后面加”:even”,button[class=test]:even,或者odd偶数

    修改后的示例代码如下:

    www.jb51.net jQuery动态获取事件

    var html="";//声明变量用于存放html

    for (i=0;i<=10;i++){

    html=html+"按钮"+i+"";

    }

    $('#test').html(html);

    $('#test').on('click','button[class=test]:even',function (e){

    console.log($(this));

    });

    测试jquery动态获取奇数对象运行效果:

    c1f7729db9be4608466a726ecfcf8609.gif

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    展开全文
  • 采用JQuery技术先获取页面元素,然后再在后面追加元素的时候(append),在下面用 $(selector) 获取刚刚添加标签,发现怎么都获取不到。 之所以这样原因是因为页面已经将JS加载完毕,此时新增请求动态添加节点,...

    说明

    采用JQuery技术先获取页面元素,然后再在后面追加元素的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到。

    之所以这样原因是因为页面已经将JS加载完毕,此时新增请求动态添加节点,自然获取不到。

    动态添加的标签要事件委托才能获取到节点,具体解决办法:

    • 通过on绑定事件(注意使用on绑定事件时,hover无效,因为on的参数只能传一个函数)
    • live绑定:
    • delegate绑定:

    语法:
    $(selector1).on(events,[selector2],[data],fn)

    参数描述
    events一个或多个用空格分隔的事件类型和可选的命名空间
    selector2可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。
    data可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理
    fn该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false

    注意

    • selector1 为动态添加节点的父级节点,请使用非动态添加的父级节点,不然同样获取不到。
    • 请委托给直接上级非动态添加节点,不要扩大范围,否则可能会造成一次点击多次执行情况!

    示例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="sth1"><button id="btn1">btn1</button></div>
            <div id="sth2"></div>
            <div id="sth3"></div>
    
            <script src="jquery/jquery-2.1.1.min.js"></script>
            <script type="text/javascript">
                $("#btn1").click(function () {//能正常触发事件
                    alert("btn 111");
                });
                $(function () {
                    $("#sth2").append('<button id="btn2">btn2</button>');
                    $("#sth3").append('<button id="btn3">btn3</button>');
                });
    
                $("#btn2").click(function () {//不能正常触发事件
                    alert("btn 222");
                });
                $("#sth3").on("click","#btn3",function () {//能正常触发事件
                    alert("btn 333");
                });
            </script>
        </body>
    </html>
    
    展开全文
  • JQuery 如何ul动态添加li标签

    千次阅读 2020-04-20 11:25:09
    JQuery 如何ul动态添加li标签 首先在html页面中找到相应的标签对。 如下图: <ul id="ulPlayPist"> <li class="li_style"> <div id="divItem1" class="div_item_v_style"> <img id="img_...
  • Jquery监听动态添加标签

    千次阅读 2019-05-22 11:10:37
    Jquery监听动态添加标签需要用 $(‘父标签’).on(‘click’, ‘子标签’, function(){}) 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, ...
  • jquery获取动态添加标签对象

    千次阅读 2017-12-02 20:45:27
    jquery无法直接给网页里面动态添加点击事件,并且获取到对象 一般来说,js获取动态添加的组件都是自定义给标签添加上onclick属性来达到调用,这是普通的方法,如下:onclick方式获取 <!DOCTYPE html> <title>...
  • JQuery动态添加标签

    2020-04-24 23:26:29
    JS部分 注:必须引入JQuery,且要在调用之前,一个页面引入一次即可 1、页面加载事件。 2、增加一个点击后增加标签的方法 3、初始化一个i,用来保证增加的标签的唯一性。 4、为增加的标签写一个点击后删除本身的...
  • jQuery动态添加html标签

    2020-07-21 17:08:16
    `注意几点**步骤**给动态添加标签添加事件如点击事件多个标签绑定同一个事件 场景 调用后台返回的json数据解析之后,在前台动态渲染 主要用的jQuery的 $("p").append("<b>Hello</b>"); 方法里面可以...
  • 本来想对动态生成的表格中的某列数字进行加减运算下面代码是动态生成的 &lt;button type="button" class="btnReduce"&gt;-&lt;/button&gt; &lt;input type="text&...
  • JQuery实现动态添加标签元素的点击事件

    万次阅读 多人点赞 2018-05-09 17:09:15
    这里所说的动态添加的元素的意思是:用js添加标签元素 先说一下我遇到的问题: 想对一些数据实现分页,就自己写一个分页功能。用的是bootstrap的分页,在页面获取数据列表后,计算出需要分多少页展示,然后用js...
  • Jquery1.7 以后,on()代替了live() 例子如下:$(document).on("click",'.mpic',function() { //回调函数内容 });
  • 在jsp页面给jquery 动态添加标签而且指定样式: $("#id").append("<span style='color:red........'></span>"); $("input[value=查看]").click(function(){$.ajax({ url:"AdminServlet", type:"post...
  • jquery动态添加标签

    2017-10-07 14:07:54
    http://www.cnblogs.com/hzhh123/p/5559946.html
  • jquery动态加载的页面标签在执行$("#ID").click(function(){-------});时没反应? 在网上找找了很久终于发现问题,只需要将你的时间改成$(".页面原始class").on('click','#js动态加载元素的...
  • 今天在项目中遇到一个问题,就是使用jquery动态添加<li></li>标签,然后对li 增加click事件。 开始的代码如下 <div class="main-content"> <button class="btn btn-positive btn-block ...
  • 主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考...
  • 通过使用jQuery EasyUI可以非常容易的动态添加标签,你只需调用'add'方法即可。 在本教程中,我们将使用iframe动态添加标签来显示一个页面。当点击添加按钮时,一个新的标签将会被添加。如果标签已经存在了,那么...
  • jQuery EasyUI 布局 - 动态添加标签页(Tabs)  通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。  在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs。 当点击添加...
  • 设置了p标签的class, 然后用jquery定义该标签单击事件为后面加上新内容, 并且新加的内容设置相同的class. 为什么原来的标签单击后后面追加内容, 而动态生成的标签单击后后面不会再追加新内容, 如何解决? html代码...
  • jQuery如何获取动态添加的元素

    千次阅读 2019-04-29 18:17:04
    jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法 度娘推荐的方法基本是用live()方法 live() 方法为被选元素附加一个或多个事件处理程序...
  • 网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。 一.使用addClass()和removeClass()添加和删除一个CSS类...
  • 由于用到国际化,且使用jquery.numberformatter-1.1.3.js类库。在对所有td做国际化时,发现有被重复国际化的现象。 国际化方法如:i18_data("#testTable tr td","${i18("jquery-numberformatter.local")}");即...
  • 通过jQuery快速完成网页动态添加

    千次阅读 2020-05-26 10:12:31
    正常在通过jQuery网页内的元素进行动态添加和删除时我们都是使用append()、addClass()、appendTo()等函数,但如果在处理较复杂的情况时,如果不进行简化,内容会很冗余,而且不便于代码阅读和审查,类似下面这样:...
  • jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素...这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 ? 1 2 3
  • 页面有些元素是 AJAX 动态添加的,要这些元素绑定事件,可以使用 jQuery 中的 on(events,[selector],[data],fn)。
  • 众所周知,使用a标签跳转之后,会刷新一次,继而这个添加的样式就会消失。那么怎么解决这一问题呢? <script> $(function () { $('.bar a').each(function () { if ($($(this))[0].href == String...
  • jQuery自定义添加删除标签代码基于jquery.1.9.1.min.js制作,有自定义添加删除标签功能。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,207
精华内容 32,082
关键字:

jquery给页面动态添加标签