如何从其他函数访问动态创建的dom元素值＆＃39;事件监听器

Question

我正在使用javascript动态创建表单元素，因为我无法使用html表单，因为它在页面上变为静态。点击后我想从其他功能触发事件处理，但没有发生任何事情

HTML表单不起作用，因为此表单是在用户的每次调用中创建的，它是每个视频帧下的注释框。

function createCommentForm() {
  var fc = document.createElement("form");
  fc.setAttribute('name', "formC");
  var it = document.createElement("input"); //input element, text
  it.setAttribute('type', "text");
  it.setAttribute('name', "comment");
  var ib = document.createElement("input"); //input button, button
  ib.setAttribute('type', "submit");
  ib.setAttribute('name', "btnC");
  ib.setAttribute('value', "add comment");
  ib.onclick = function() {
    return false
  }; //doesnt go to another page on click
  fc.appendChild(it);
  fc.appendChild(ib);
  document.getElementById("div3").appendChild(fc);
}

function addComment(urlX) {
  createCommentForm();
  var btnC = document.getElementById("button");
  btnC.addEventListener("click", function() {
    var cmt = 'data=' + urlX + '.txtbreakpoint' + document.getElementById("comment").value;
    //data must be passed somehow as its need by $_POST in save.php file
    var xmlhttp = new XMLHttpRequest();
    var response = document.createElement("p");
    document.getElementById("div3").appendChild(response);
    xmlhttp.onload = function() {
      response.innerHTML = xmlhttp.responseText;
    }
    xmlhttp.open("POST", "ssave.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(cmt);
    console.log(cmt + ' 2');
    //document.getElementById('formC').reset(); //clear form fields
  });
}

Answer 1

您正在尝试button使用此ID var btnC = document.getElementById("button"); ^ ，但您甚至没有将其设置为创建的按钮。

ib.id = 'button';

将ID设置如下：

function createCommentForm() {
  var fc = document.createElement("form");
  fc.setAttribute('name', "formC");
  var it = document.createElement("input"); //input element, text
  it.setAttribute('type', "text");
  it.setAttribute('name', "comment");
  var ib = document.createElement("input"); //input button, button
  ib.setAttribute('type', "submit");
  ib.setAttribute('name', "btnC");
  ib.setAttribute('value', "add comment");
  ib.id = 'button';
  ib.onclick = function() {
    return false
  }; //doesnt go to another page on click
  fc.appendChild(it);
  fc.appendChild(ib);
  document.getElementById("div3").appendChild(fc);
}

function addComment(urlX) {
  createCommentForm();
  var btnC = document.getElementById("button");
  btnC.addEventListener("click", function() {
    console.log('Ajax call!')
    
    
    /*
    var cmt = 'data=' + urlX + '.txtbreakpoint' + document.getElementById("comment").value;
    //data must be passed somehow as its need by $_POST in save.php file
    var xmlhttp = new XMLHttpRequest();
    var response = document.createElement("p");
    document.getElementById("div3").appendChild(response);
    xmlhttp.onload = function() {
      response.innerHTML = xmlhttp.responseText;
    }
    xmlhttp.open("POST", "ssave.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(cmt);
    console.log(cmt + ' 2');
    //document.getElementById('formC').reset(); //clear form fields
    */
  });
}

addComment('urlX');

请查看此代码段

＆＃13;

＆＃13;

<div id='div3'></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

请参阅？该函数被调用。

Answer 2

您正在搜索名为id的{​​{1}}元素，但您的元素的comment为name。更改选择器可以解决问题。

但是，您的代码应该稍微修改一下。如果您不想在任何地方提交数据（通过传统的comment按钮），请不要仅使用提交按钮取消submit事件。而是使用常规sumbit。

而且，代码可以现代化。

＆＃13;

＆＃13;

button

＆＃13;

function createCommentForm(){
  var fc = document.createElement("form");
  fc.name = "formC";
  var it = document.createElement("input");
  it.type = "text";
  it.name = "comment";
  var ib = document.createElement("input");
  ib.type ="button";
  ib.name = "btnC";
  ib.value = "add comment";
  ib.addEventListener("click", function(e) { 
    var cmt = 'data=' + it.value + '.txtbreakpoint' + document.querySelector("[name=comment]").value;
    //data must be passed somehow as its need by $_POST in save.php file
    var xmlhttp = new XMLHttpRequest();
    var response = document.createElement("p");
    document.getElementById("div3").appendChild(response);
    xmlhttp.onload = function() {
      response.innerHTML = xmlhttp.responseText;
    }
    xmlhttp.open("POST", "ssave.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(cmt);
    console.log(cmt + ' 2');
    //document.getElementById('formC').reset(); //clear form fields
  });
  fc.appendChild(it);
  fc.appendChild(ib);
  document.getElementById("div3").appendChild(fc);
}

createCommentForm();

＆＃13;

＆＃13;

＆＃13;