js动态添加按钮，并绑定点击事件

最新推荐文章于 2024-07-12 17:46:22 发布
最新推荐文章于 2024-07-12 17:46:22 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ysmooth/article/details/120218122
版权
该博客内容涉及前端开发，主要讲述了如何在FTL文件中动态生成按钮，并使用JavaScript（jQuery）为每个按钮绑定点击事件。点击事件实现的功能是根据按钮上的信息更改IFrame的源URL，展示预览内容。
摘要由CSDN通过智能技术生成

目录

前言

任务描述：动态添加按钮，并对每个按钮绑定一个点击事件。

ftl文件

<!DOCTYPE html>
<html>
<head>
    <#include "/head.ftl">
    <script type="text/javascript" src="/lib/template-web.js"></script>
    <script type="text/html" id="paperTemplate">
        <form class="layui-form">
            {{each data piao index}}
            <div class="layui-btn-group">
                <button type="button" class="layui-btn"> 票{{piao.order}}预览 </button>
            </div>
            {{/each}}
        </form>
    </script>
</head>
<body>

<script>
    var autoId=${autoId};
</script>

<div class="layui-fluid">
    <div class="layui-row">
        <fieldset class="layui-elem-field">
            <legend><b>${ theObj.name!}(ID:${theObj.autoId!})</b></legend>
            <div class="layui-field-box" style="text-align: center">
                满分：${ theObj.fullScore!}&nbsp;&nbsp;&nbsp;&nbsp;及格分：${ theObj.passScore!}
            </div>
            <div class="layui-field-box" style="text-align: center">
                &nbsp;&nbsp;&nbsp;&nbsp;出卷人：${ theObj.createUserName!}
                &nbsp;&nbsp;&nbsp;&nbsp;出卷时间： ${ theObj.createDate?datetime}
            </div>
            <div class="layui-card-body" id="setTab">
            </div>
        </fieldset>
    </div>
    <iframe onload="setHeight()" width=100% id="my-iframe" frameborder="no" height="1" src=" " scrolling="no"></iframe>
    </iframe>
</div>

<script type="text/javascript" src="/js/business/paper/tpiao_review.js"></script>
</body>

</html>

js文件

在js中写入

var prefix = "/business/paper";
var tags=[];
var step = 111;
var table;
var dataPiao = [];
var order= [];
var piaoId= [];



$.ajax({
    id: 'autoId'
    ,url: '/business/paper/listById/'+autoId //数据接口
    ,success: function (result) {
        if(result.code==0){
            console.log(result);
            var counts = result.data.length;
            for(var i=0;i<counts;i++){
                dataPiao[i] = {autoIds:result.data[i].autoId, order:i+1};
                piaoId[i]=dataPiao[i].autoIds;
                console.log(dataPiao[i].autoIds);
            }

            var htmldata = template("paperTemplate",{data:dataPiao});
            var container = document.querySelector("#setTab");
            container.innerHTML=htmldata;

            let btns=document.querySelectorAll("button");
            for (let j= 0; j <btns.length; j++) {
                //为每个按钮都要注册点击事件
                btns[j].onclick = function () {
                    document.getElementById('my-iframe').setAttribute('src','/business/tpiao/p_review?autoId=' + dataPiao[j].autoIds + '&flag=' + 'preview');
                };
            }
        }
    }
});

function getIframeWindow(obj) {
    return obj.contentWindow || obj.contentDocument.parentWindow;
}
function getIframeHeight(obj){
    var idoc = getIframeWindow(obj).document;
    if(idoc.body){
        return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);
    }else if(idoc.documentElement){
        return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);
    }
}
function setHeight(){
    var myiframe = document.getElementById("my-iframe");
    myiframe.height = getIframeHeight(myiframe);
}
}
Ysmooth
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试 js动态增加按钮
qq_35715692的博客
09-26 2025
网上之前发现的一个前端的面试题目，之前我学习不是很深入，回复改进了下，目前我又改进了 之前网友写的例子的地址为javascript动态生成按钮并绑定点击事件_海峰的博客-CSDN博客_js创建按钮并给按钮绑定事件 我在评论下面写了一次的改进型，但是不满意，今天改进v2.0版本来了 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http
js中的点击按钮事件
想不出一个好的标题，就用这个吧
03-29 3万+
年前的时候自学过一段时间的html+css，讲真，这一块是我的兴趣点，但有时候真的觉得很无力，怀疑自己的审美，强迫症晚期的人伤不起啊，各种调整，各种不美好…… 现在来到了js，三兄弟即将合体，希望我能沉迷其中吧~~ 首先写了一个js脚本，效果是用引号中的内容去替代id为“we”中的html内容： function myFirst() { document.getElementById("...
js动态创建按钮
chujuan7169的博客
01-29 232
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javas...
前端进阶之路：点击事件绑定
最新发布
2401_84419493的博客
07-12 621
, false)}, false)所有功能终于又正常了，我很开心地准备上线。
javascript动态生成按钮并绑定点击事件
热门推荐
海峰的博客
10-07 4万+
前一个多月公司的前端开发人员离职，公司一直在招前端，基本上每天都有几个来面试的人，就这个面试频率，也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础，但也很考基本功，基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线，修改bug，一直没时间。现在国庆节放假，发了一天时间把前端又看了下，然后理所当然的就写出来了，功
js动态添加的按钮，其响应事件的添加
jiang_mingyi的博客
10-18 2269
function a(){ var str = "<a class='delete'>删除</a>"; $div.append(str);//如此添加的事件，其click事件是不能绑定的 $('.delete').on('click' function(){ ... });//在此需要重新写一次，相当于给新添加的a绑定click事件 } $('.del
js(jquery)绑定点击事件
美丽的泡沫
07-22 2万+
test 第一种 $("#test").click(function(event) { /* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false); 第三种 html
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
在JavaScript中，为按钮元素绑定点击事件是实现交互式网页的关键步骤。点击事件通常与一个函数关联，当用户点击该按钮时，这个函数会被执行。本文将深入探讨如何使用`onclick`属性以及JavaScript中的事件处理程序来...
JS中动态添加事件(绑定事件)的代码
12-04
两种方式：直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况： 代码如下: var t = document.getElementById(“tab1”); t.onclick = function tst(){ alert(”); } 第二种...
layui动态绑定事件的方法
10-16
在实际操作中，我们可以通过编写一段JavaScript代码来实现动态绑定事件。先通过jQuery选取需要添加事件监听的元素，然后使用.on()方法绑定事件。对于动态添加的元素，我们同样可以使用.on()方法进行事件委托，将事件...
JS如何实现动态添加的元素绑定事件
10-16
在网页中动态添加元素并为其绑定事件是前端开发中的常见需求。传统的直接绑定事件的方式在动态内容中可能不会生效，因为动态添加的元素在绑定事件时还不存在。为了解决这个问题，我们可以采用以下两种方法： 1. 在...
javascript实现的动态添加表单元素input,button等(appendChild)
10-30
给大家介绍了javascript实现的动态添加表单元素input,button等(appendChild)的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
js 特效 html 特效 动态的按钮
06-14
js 特效 html 特效 动态的按钮 js 特效 html 特效 动态的按钮
微信小程序之绑定点击事件实例详解
08-30
首先，在 home.wxml 文件中，我们添加一个 button 元素，并绑定一个点击事件： ```html <view>Hello {{name}}! 点击我，换名字 ``` 然后，在 home.js 文件中，我们定义一个数据对象 helloData，并实现 change...
如何给动态添加的 button 绑定事件？
promote的博客
11-21 1337
给动态添加的button添加点击事件（不能直接用 click事件） // 给class=‘c-btn-cancle’ 的标签添加点击事件： $(document).on("click", '.c-btn-cancle', function () { // todo }); 注意： 使用 监听事件 on，在监听到 class = ‘c-btn-cancle’ 的标签出现时，为其动态添加事件。 click（）方法只能给已存在的标签添加点击事件。 ...
JS 给动态生成的按钮绑定onclick事件
qq_37994920的博客
11-05 2601
JS 给动态生成的按钮绑定onclick事件 上代码： var oBtn=document.getElementsByTagName(&quot;input&quot;); //绑定动态弹出框 for (var i=0;i&amp;lt;oBtn.length;i++){ oBtn[i].className=&quot;btn_dle&quot;; //给每个input加上一个class名。 ...
动态生成按钮的点击事件绑定
weixin_30394981的博客
09-04 117
当按钮为动态生成时，向按钮上绑定click时间时会失效。 on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 //为所有p元素绑定click事件处理程序(注意：这里省略了selector参数) //n2、n3、n5均可触发该事件 $("p").on("click", function(event){ // 这里的this指向触发点击事件的p元素(Element) ...
给动态添加的按钮添加动态事件
sunlizhen的专栏
06-19 1273
function add(){ var btn = document.createElement("button"); //首先动态创建button按钮； btn.id="box"; btn.value = "动态创建的按钮"; var text = document.createTextNode("动态创建的按钮"); //动态创建按钮的文本元素； bt
js给按钮绑定点击事件
05-28
要给按钮绑定点击事件，可以使用以下代码： ```javascript let btn = document.querySelector('#myButton'); // 获取按钮元素 btn.addEventListener('click', function() { // 在这里编写点击按钮后的操作 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值