javascript动态添加button,并添加onclick事件,复制粘贴

904 阅读1分钟

参考csdn论坛的问答,做动态添加button。javascript动态添加button,并添加onclick事件-CSDN社区

带我的人

let div = window.document.createElement('div')
div.innerHTML = `<input onclick="${Copy()"} type="button" value="复制" />`
//原来想用上面这行这个的,带我的人,不建议用,不动态,而且这个,他是先解析完动态的,解析出来undefined。
还有jquery的方法。let btn = $(`<button >copy</button>`)

<script type="text/javascript">
function CreatButton() {
    var btn = document.createElement("input");
    btn.type = "button";
    btn.style.width = "80px";
    btn.id = "submit";
    btn.name = "submit";
    btn.value = "发送";
    btn.onclick = "submit()";
    document.getElementById("mydiv").appendChild(btn);
}
function submit() {
    alert("111");
}</script>

为什么点击生成的button没有反应呢?
在线急等,求大神帮忙!

答案:btn.onclick =submit; 或 btn.onclick = function () { submit(); };

失败代码:

    //   btn.onclick = function () {     //     navigator.clipboard.writeText(text)    //     .then(() => {    //       console.log('Text copied.');    //     })    //     .catch(() => {    //       console.log('Failed to copy text.');    //     });     //     // var textarea = document.createElement("textarea")    //     // textarea.value = text; // 修改文本框的内容    //     // console.log(textarea,'textarea')    //     // debugger    //     // textarea.select(); // 选中文本    //     // document.execCommand("copy"); // 执行浏览器复制命令    //     alert("复制成功");    //  }      // btn.addEventListener('click', function() {      //   // var text = document.getElementById("text").innerText;      //   var input = document.createElement("input")      //   input.value = text; // 修改文本框的内容      //   input.select(); // 选中文本      //   document.execCommand("copy"); // 执行浏览器复制命令      //   alert("复制成功");      //  })

成功代码:

let btn = window.document.createElement('input')
btn.type = "button";
btn.style.width = "80px";
btn.value = "复制";
 btn.addEventListener('click', () => {
    navigator.clipboard.writeText(text)      
 })
 if (!tip) {  
    parent.appendChild(btn)
 }

参考:

JavaScript 中的复制粘贴操作_慕课手记 (imooc.com)

 /**   * 给表单某个字段下一行追加一个复制按钮   * @param {*} id 表单字段id,必填   * @param {*} cbtId 复制按钮id,必填   * @param {*} array 复制区域,必填   * @param {*} setId 将复制内容赋值给表单字段id   */    window.addCBTN = function(id = '', cbtId = '', array, setId= '') {      let tip = parent.querySelector(`[data-id=${tipsId}]`)      let btn = window.document.createElement('input')      btn.id = cbtId      btn.type = "button";      btn.style.width = "80px";      btn.value = "复制";      btn.addEventListener('click', () => {        let text = ''        array.map(item => {          let itemTarget =window.formData.find(i => i.ext_id === item)          if(itemTarget.value){           text += itemTarget.cname +':'+itemTarget.value +'\n'          }        })        //这个if是如果有setId传进来,就赋值复制内容到这个idif (setId) {          app_setValue(setId,text)        }        if (navigator.clipboard && window.isSecureContext) {          return navigator.clipboard.writeText(text);        } else {          let textArea = document.createElement("textarea");          textArea.value = text;          // 使text area不在viewport,同时设置不可见          textArea.style.position = "absolute";          textArea.style.opacity = 0;          textArea.style.left = "-999999px";          textArea.style.top = "-999999px";          document.body.appendChild(textArea);          textArea.focus();          textArea.select();          return new Promise((res, rej) => {              // 执行复制命令并移除文本框              document.execCommand('copy') ? res() : rej();              textArea.remove();          });      }      })      if (!tip) {        parent.appendChild(btn)      }    }