jq点击增加一段html

<!--添加广告位信息开始-->
<div class="all" style="">
    <div class="widget-header">
        <h4>广告位明细(最多5条)</h4><div style="float:right;margin-right: 50px; cursor: pointer;"><h4 id="newyz1">+增加</h4></div>
    </div>
    <div class="one1">
        <div class="contract-contracttype">
            <div class="form-group field-contract-contracttype required has-success">
                <label class="col-sm-1 control-label no-padding-right" for="receivableamount[contractId]">广告位</label>
                <div class="col-lg-2">
                    <input type="hidden" class="advertId" name="advertId[]" id="advertId" value="">
                    <input type="hidden" class="advertname1" name="advertname1[]" id="advertname1" value="">
                    <select id="port" class="form-control port" name="port[]" onchange="checkadvertname(this);">
                        <?php foreach($port as $key=>$value):?>
                        <option value="<?=$value[‘key‘]?>"><?=$value[‘value‘]?></option>
                        <?php endforeach;?>
                    </select>
                </div>
                <div class="col-lg-2">
                    <select id="page" class="form-control page" name="page[]" onchange="checkadvertname(this);">
                        <?php foreach($page as $key=>$value):?>
                            <option value="<?=$value[‘key‘]?>"><?=$value[‘value‘]?></option>
                        <?php endforeach;?>
                    </select>
                </div>
                <div class="col-lg-2">
                    <select id="advertname" class="form-control advertname" name="advertname[]" onchange="getadvert(this)">
                        <option value="0">请选择广告位</option>
                    </select>
                </div>

            </div>
        </div>
        <div class="form-group field-applypay-paymenttime">
            <label class="col-sm-1 control-label no-padding-right" for="applypay-paymenttime">发布时间</label>
            <div class="col-sm-3 col-lg-2">
                <div class="input-group">
                    <span class="input-group-addon"><i class="icon-calendar bigger-110"></i></span>
                    <input class="form-control date-picker datetime-picker3" id="projectStime" name="projectStime[]" data-date-format="dd-mm-yyyy" onfocus="WdatePicker({dateFmt:‘yyyy-MM-dd‘})" type="text">
                    <em style="position: absolute; top: 5px; right: -28px; width: 20px;">-</em>
                </div>
            </div>
            <div class="col-sm-3 col-lg-2">
                <div class="input-group">
                    <span class="input-group-addon"><i class="icon-calendar bigger-110"></i></span>
                    <input class="form-control date-picker datetime-picker3" id="projectEtime" name="projectEtime[]" data-date-format="dd-mm-yyyy" onfocus="WdatePicker({dateFmt:‘yyyy-MM-dd‘})" type="text">
                </div>
            </div>
        </div>
        <div class="form-group field-receivableamout-reason required">
            <label class="col-sm-1 control-label no-padding-right" for="receivableamout-reason">备注说明</label>
            <div class="col-lg-5"><input type="text" id="receivableamout-reason" class="form-control" name="reason[]" maxlength="100"></div>
            <div class="col-lg-3">
                <div class="help-block"></div></div>
        </div>

    </div>
    <span class="form-group" id="xx">

    </span>
    <div class="form-group field-receivableamout-reason required">
        <label class="col-lg-1 control-label no-padding-right" for="receivableamout-reason">上传附件</label>
        <div class="col-lg-11 wdata1">
            <div class="col-lg-3 btnimg">
                <label for="uploadImg" class="btn btn-primary fileimg"><i class="fa-plus-sign"></i>
                    <span>上传</span>
                    <input  class="UploadImg" data="1"  type="file" name="files[]"  multiple></label>
                </label>
            </div>

        </div>
    </div>
</div>
<!--添加广告位信息结束-->

 $("#newyz1").bind(‘click‘,function() {
                    _addnum++;
                    var num=_addnum;
                    console.log(num);
                    if($(".one1").length>4){
                        layer.msg("最多5条数据");
                        return false;
                    }
                    var html=‘<div class="one1">\n‘ +
                        ‘                <div class="contract-contracttype">\n‘ +
                        ‘                    <div class="form-group field-contract-contracttype required has-success">\n‘ +
                        ‘<input type="hidden" class="advertId" name="advertId[]" id="advertId" value="">\n‘+
                        ‘ <input type="hidden" class="advertname1" name="advertname1[]" id="advertname1" value="">\n‘+
                        ‘                        <label class="col-sm-1 control-label no-padding-right" for="receivableamount[contractId]">广告位</label>\n‘ +
                        ‘                    <a href="javascript:void(0)" class="khnimus1" title="" id="newyz1" data-original-title=""><i class="icon-trash bigger-130"></i></a>\n‘+
                        ‘                        <div class="col-lg-2">\n‘ +
                        ‘                            <select id="port" class="form-control port" name="port[]" onchange="checkadvertname(this);">\n‘;
                    for (var i=0;i<ports.length;i++){
                        html+=‘<option value=‘+ports[i][‘key‘]+‘>‘+ports[i][‘value‘]+‘</option>‘;
                    }
                    html+=‘</select>\n‘ +
                        ‘                        </div>\n‘ +
                        ‘                        <div class="col-lg-2">\n‘ +
                        ‘                            <select id="page" class="form-control page" name="page[]" onchange="checkadvertname(this);" >\n‘;
                    for (var i=0;i<pages.length;i++){
                        html+=‘<option value=‘+pages[i][‘key‘]+‘>‘+pages[i][‘value‘]+‘</option>‘;
                    }
                    html+=‘</select>\n‘ +
                        ‘                            </select>\n‘ +
                        ‘                        </div>\n‘ +
                        ‘                        <div class="col-lg-2">\n‘ +
                        ‘                            <select id="advertname" class="form-control advertname" name="advertname[]" onchange="getadvert(this)" >\n‘ +
                        ‘                                <option value="0">请选择广告位</option>\n‘ +
                        ‘                            </select>\n‘ +
                        ‘                        </div>\n‘ +
                        ‘\n‘ +
                        ‘                    </div>\n‘ +
                        ‘                </div>\n‘ +
                        ‘                <div class="form-group field-applypay-paymenttime">\n‘ +
                        ‘                    <label class="col-sm-1 control-label no-padding-right" for="applypay-paymenttime">发布时间</label>\n‘ +
                        ‘                    <div class="col-sm-3 col-lg-2">\n‘ +
                        ‘                        <div class="input-group">\n‘ +
                        ‘                            <span class="input-group-addon"><i class="icon-calendar bigger-110"></i></span>\n‘ +
                        ‘                            <input class="form-control date-picker datetime-picker3" id="projectStime" name="projectStime[]" data-date-format="dd-mm-yyyy" onfocus="WdatePicker({dateFmt:\‘yyyy-MM-dd\‘})" type="text">\n‘ +
                        ‘                            <em style="position: absolute; top: 5px; right: -28px; width: 20px;">-</em>\n‘ +
                        ‘                        </div>\n‘ +
                        ‘                    </div>\n‘ +
                        ‘                    <div class="col-sm-3 col-lg-2">\n‘ +
                        ‘                        <div class="input-group">\n‘ +
                        ‘                            <span class="input-group-addon"><i class="icon-calendar bigger-110"></i></span>\n‘ +
                        ‘                            <input class="form-control date-picker datetime-picker3" id="projectEtime" name="projectEtime[]" data-date-format="dd-mm-yyyy" onfocus="WdatePicker({dateFmt:\‘yyyy-MM-dd\‘})" type="text">\n‘ +
                        ‘                        </div>\n‘ +
                        ‘                    </div>\n‘ +
                        ‘                </div>\n‘ +
                        ‘                <div class="form-group field-receivableamout-reason required">\n‘ +
                        ‘                    <label class="col-sm-1 control-label no-padding-right" for="receivableamout-reason">备注说明</label>\n‘ +
                        ‘                    <div class="col-lg-5"><input type="text" id="receivableamout-reason" class="form-control" name="reason[]" maxlength="100"></div>\n‘ +
                        ‘                    <div class="col-lg-3">\n‘ +
                        ‘                        <div class="help-block"></div></div>\n‘ +
                        ‘                </div>\n‘ +
//                            ‘ <div class="form-group field-receivableamout-reason required">\n‘ +
//                        ‘                    <label class="col-lg-1 control-label no-padding-right" for="receivableamout-reason">上传附件</label>\n‘ +
//                        ‘                    <div class="col-lg-11 wdata‘+num+‘">\n‘ +
//                        ‘                        <div class="col-lg-3 btnimg">\n‘ +
//                        ‘                            <label for="uploadImg" class="btn btn-primary fileimg"><i class="fa-plus-sign"></i>\n‘ +
//                        ‘                                <span>上传</span>\n‘ +
//                        ‘                                <input  class="UploadImg" data="‘+num+‘"  type="file" name="files[]"  multiple></label>\n‘ +
//                        ‘                            </label>\n‘ +
//                        ‘                        </div>\n‘ +
//                        ‘                    </div>\n‘ +
//                        ‘                </div>\n‘+
                    ‘</div>‘;
                    $(‘#xx‘).append(html);

                    //jq上传插件开始
                    $(".UploadImg").fileupload({
                        url: ‘http://imgapi.qq.com/upload/php/upload.php‘,
                        sequentialUploads: true,
                        formData: {"app": ‘brzy‘},
                        returnType: "json",
                        acceptFiles: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/*,image/*,.pdf,.zip,.rar,.doc,.docx",
                        dataType: ‘json‘,

// 上传完成后的执行逻辑
                        done: function (e, data) {
                            var n = data.jqXHR.responseText;
                            var an = JSON.parse(n);
                            // console.log(an);
                            layer.closeAll();
                            // if(typeof(_clickBut)==‘undefined‘){
                            //     var _clickBut=‘‘;
                            // }
                            _clickBut = $(this).attr(‘data‘);//哪个按钮被点击了
                            console.log($(this));
                            callback(an.url);
                        },
// 上传过程中的回调函数
                        progressall: function (e, data) {
                            layer.load(0, {shade: false});
                        }
                    });

                    //jq插件结束
                    $(".khnimus1").live(‘click‘,function(){
                        $(this).parents(".one1").remove();
                    });
                });

时间： 2024-12-18 08:03:27

jq点击增加一段html的相关文章

css3模拟jq点击事件

还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为什么不直接把 a放在radio上面呢?因为选择器 + 好选择嘛,用radio的功能,a来修饰按钮样式,再把radio 隐藏,这里要用opacity(透明度) 这就是,主要原理! 上视图吧 <!DOCTYPE html> <html>

点击增加或者减少商品数量并且自动计算总价格

点击增加或者减少商品数量并且自动计算总价格:本章节介绍一下如何实现点击按钮来添加或者删除商品的数量,并且能够自动计算商品的总价格.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

JQ点击高亮显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <styl

页面JS实现按钮点击增加输入框

最近开发实现了那种点击增加按钮就会多出一栏的效果,但是当每栏的输入框的数量比较多的时候,后台参数的接受就是个问题,不过现在问题总算解决了,用List集合去接受页面数组的方式,具体实现如下: 实现的思路: 首先,要把传递的每栏参数变成每个对象,例如:昵称,用户名,密码就是一个user类的属性: @Entity public class User { @Id @GenericGenerator(name = "generator", strategy = "increment&q

昨天所写的JQ 点击隐藏事件，关键性原理

JQ 点击隐藏事件,关键性原理 1.JQ 库的调用一般选择为: 1)库越小越好 2)库的功能越强大越好 <script src="js/jquery.js" type="text/javascript"></script> 2.节点的选取 3.利用JQ 操作选取的节点的 ID 进行事件的运行

jq点击事件不生效，效果只闪现一次又立马消失的原因？

出现的问题:jq点击事件不生效,点击的时候效果实现但又立马消失,页面重新刷新了一次可能出现的原因: a标签href属性的原因,虽然点击事件生效,但页面又刷新了一次,所以没有效果,只闪了一次解决方案:阻止a标签跳转,给a标签的href属性加 javascript:; ,即可 <a href="javascript:;" ></a> 原文地址:https://www.cnblogs.com/6531792-j/p/10778269.html

ng-checked选择和点击增加dom

1.需求在添加页面实现一个checkbox的选择,然后在详情页面展示时,会自动选上之前被选中的. 2.添加页面看官最好将这个代码复制过去看看效果. <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></sc

jq点击元素之外关闭元素的共存问题

1.首先第一个想到的是阻止事件冒泡; 随便写的css; .select-wrap, .select-wrap1{ position: relative; width: 100px; border: 1px solid #000; } .select-wrap1{ margin-top: 100px; } .select-list{ display: none; position: absolute; border: 1px solid red; top: 100%; left: 0 } <div

JS，JQ点击事件

1.点击显示,再次点击隐藏 $("#pingfen-click").click(function(){ name = document.getElementById("pf-window").className; if(name == 'hide'){ $('#pf-window').removeClass('hide'); }else{ $('#pf-window').addClass('hide'); } });