javascript動態生成按鈕並繫結點選事件
前一個多月公司的前端開發人員離職，公司一直在招前端，基本上每天都有幾個來面試的人，就這個面試頻率，也才招了一個多月才招到。絕大部分都是死在了一道上機面試提上。題目很基礎，但也很考基本功，基本上才3%左右的人做出來。當時我就在想以我的半吊子前端知識挑戰一下這個題目。之前一直忙著把Android專案弄上線，修改bug，一直沒時間。現在國慶節放假，發了一天時間把前端又看了下，然後理所當然的就寫出來了，功能雖然完成了，但程式碼不怎麼優雅。
題目是說有一個html頁面，頁面有一個按鈕，點選這個按鈕，彈出一個框說自己是幾號按鈕，並詢問是否生成新按鈕。 點是生成一個新按鈕，新按鈕也能繼續響應點選事件，生成新按鈕。如圖
點選彈框如圖。
點確定，生成新按鈕，點選新按鈕能繼續彈窗問是否生成新按鈕。並報自己是幾號按鈕。
分析下這道題發現難點在將生成的新按鈕繫結點選事件，並能監聽自己是幾號按鈕。解決辦法是用js動態插入html程式碼，在插入的html程式碼中繫結點選事件。然後在點選事件中獲取頁面中所有按鈕，為每一個按鈕設定一個屬性，用來標記自己是幾號按鈕。程式碼如下。其實也很簡單的。如果有更簡潔逼格更高的寫法，歡迎討論。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <head> <body> <input name="按鈕" type="button" onClick="clic()" value="按鈕"></input> <div id="content"></div> <script type="text/javascript"> clic(); function clic(){ var bs = document.getElementsByTagName("input"); for(var i=0;i<bs.length;i++){ var b = bs[i]; b.setAttribute("aaa",i); b.onclick = function(){ var s = confirm("我是"+this.getAttribute("aaa")+"號按鈕,是否生成新按鈕"); if(s){ document.getElementById("content").innerHTML += "</br><input name=\"按鈕\" type=\"button\" onClick=\"clic()\" value=\"按鈕\"><\/input>"; clic(); } }; } } </script> </body> </html>
小細節：1：在js程式碼裡要手動掉一次clic方法。不然第一個按鈕點兩次才有反應。2：innerHtml裡面對於“ " ”和“/”要進行轉義。
相關推薦
javascript動態生成按鈕並繫結點選事件
前一個多月公司的前端開發人員離職，公司一直在招前端，基本上每天都有幾個來面試的人，就這個面試頻率，也才招了一個多月才招到。絕大部分都是死在了一道上機面試提上。題目很基礎，但也很考基本功，基本上才3%左右的人做出來。當時我就在想以我的半吊子前端知識挑戰一下這
【前端】vue2.x 配合 bootstrapTable 動態新增元素和繫結點選事件，事件無效 解決
背景： 使用bootstrap-table 表格外掛時，每一行的最後一班會加操作按鈕列。如果不加入vue的話，使用外掛自己的列屬性formatter:function(value, row, index){}即可解決，動態拼接的html元素和對應的點選事件都可以正常使用。問題來了，在使用vue時，點選事
JavaScript給按鈕繫結點選事件（onclick）的方法及js常見事件
本文例項講述了JavaScript給按鈕繫結點選事件（onclick）的方法。分享給大家供大家參考。具體分析如下： 我們可以通過設定按鈕的onclick屬性來給按鈕繫結onclick事件 <!DOCTYPE html> <html>
ajax動態載入頁面，對頁面的按鈕繫結點選事件
如題，動態載入過來的內容不在開始就載入的頁面中，所以繫結事件無效。 歷程： 開始使用正常的jQuery click 繫結 $("#site_add").click(addSite(userid)); 無效 去網上逛了一圈回來，說是用.on 繫結
react為按鈕繫結點選事件和修改屬性值
注意點：1、事件名稱由react提供，所以事件名首字母大寫。比如onClick，onMouseOver。 2、為事件提供的處理函式，格式必須是onClick={function}，沒有小括號。 3、繫結事件的格式寫法為： <button onClick={()=>this.show('傳的引
jQuery為動態新增的新元素繫結點選事件
1.首先如何用jQuery動態新增a標籤： for (var index=0; index<5; index++){ var h = '<a>動態新增點選事件</a>
vue.js使用vue-echarts給柱形圖繫結點選事件
<template> <div class="echarts"> <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
iview給佈局MenuItem標籤繫結點選事件
@click.native="info" <template> <div class="index"> <Menu mode="horizontal" :theme="theme1" active-name="1">
a標籤繫結點選事件
a標籤既可以跳轉，也可以繫結點選事件，可以將href設為javascript:void(0) 其中javascript表示偽協議，void(0)表示不執行動作，實際上就是不跳轉的意思 然後給a像普通標籤一樣繫結事件監聽函式即可 測試程式碼如下:testLoad.html (
HTML中幾種為繫結點選事件的方式比較
HTML中為button繫結事件的方式有三種。 例如以下標籤： <button type="submit" id="btn_submit"> submit </button>
js(jquery)繫結點選事件
<button type="submit" id="test">test</button> 第一種 $("#test").click(function(event){/* Act on the event */}); 第二種 document.get
58 Three.js 通過THREE.Raycaster給模型繫結點選事件
簡介 由於瀏覽器是一個2d視口，而在裡面顯示three.js的內容是3d場景，所以，現在有一個問題就是如何將2d視口的x和y座標轉換成three.js場景中的3d座標。好在three.js已經有了解決相關問題的方案，那就是THREE.Raycaster射線，用
android 監控軟鍵盤確定 搜尋 按鈕並賦予點選事件
在android的實踐開發中，為了介面的美觀，往往那些搜尋框並沒有帶搜尋按鈕，而是呼叫了軟鍵盤的搜尋按鈕，完成這次時間 好吧！直接上程式碼！ <EditText android:id="@+id/my_chat_seach
vue繫結點選事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>documen
微信小程式專案總結：for迴圈，繫結點選事件，二維陣列列表渲染
一：for迴圈，繫結點選事件分享者：niedongdong，原文地址 最近公司有小程式的專案，本人有幸參與其中，一個專案做下來感覺受益匪淺，與大家做下分享，歡迎溝通交流互相學習。先說一下此次專案本人體會較深的幾個關鍵點：微信地圖、使用者靜默授權、使用者彈窗授權、微信充值等等。言歸正傳，今天分享我遇到的關於wx
JS如何給ul下的所有li繫結點選事件，點選使其彈出下標和內容
這是一個非常常見的面試題，出題方式多樣，但考察點相同，下面我們來看看這幾種方法： 方法一： var itemli = document.getElementsByTagName("li"); for(var i = 0; i<itemli.length; i++){
div中迴圈生成button並新增點選事件
回看剛剛學習js的博文，頁面迴圈生成節點是頁面最基礎的操作之一。 要讓頁面顯示效果，必然在頁面新增dom元素！如果想要多個button，那麼迴圈新增必不可少。 首先定義div： <div id="people" style="border: groo
使用RecyclerView繫結點選事件
RecyclerView在設定點選事件時 如果不使用notifyDataSetChanged();來通知介面更新的話是不會主動呼叫onBindViewHolder(ViewHolder holder,int position)這個方法.而繫結點
laydate.js繫結點選事件和日期格式化
<input placeholder="開始日期" class="form-control layer-date pull-left" id="startTime" onclick="laydate({istime: true, format: 'YYYY-MM-D
HTML中繫結點選事件的方式
HTML中為button繫結事件的方式有五種。 例如以下標籤： <button type="submit" id="btn_submit"> submit </button> 一、使用jquery進行繫結 $('#btn_submit').click