Question

我一直在努力两个多小时才能使两行代码正常工作。我的问题是，当内容使用DOM加载时，我的代码可以工作，但是当我使用表单将内容添加到div中时，代码将停止工作。如何使它正常工作？

这是我要在函数中推送的代码：

newKeywordHtmlStr += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span style='float: right;'><button type='button' id='button"+ i +"'>Submit</button></span></div>";
container.push('term'+ i);

在函数之外，我有2个var可以提取要处理的内容：

var buttons = document.querySelectorAll('button');
var spans = document.querySelectorAll('span');

我试图创建一个包含term + i并替换的数组“容器”：

 var spans = document.querySelectorAll('span');

通过：

var spans = container;

但是它不起作用。我在这里做错了什么？预先感谢您的帮助。

Answer 1

我添加了提交按钮及其功能

点击“提交”按钮后，数据将附加到Div（即容器）

$('.send-btn').click(function () {
    var textAreaVal = document.getElementById("myTextarea").value;
    if(textAreaVal && textAreaVal!=""){
       var lines = textAreaVal.split(/\n/);
       //console.log(lines);
       $.each(lines, function( i, line ) {
          //console.log( i + ": " + line );
          var arraySearchTerms = line.split(" ");
          var newKeywordHtmlStr='<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;">';
             $.each(arraySearchTerms, function(index, value){
                newKeywordHtmlStr += "<span id=term"+ index +"> "+ value + "</span>";
            });
        newKeywordHtmlStr += "<span style='float: right;'><button type='button' id='button"+  i +"'>Submit</button></span></div>";
       $(".container").append(newKeywordHtmlStr);
      });
     }
    var buttons = document.querySelectorAll('button');
    var spans = document.querySelectorAll('span');
    for (var i=0; i<spans.length; ++i) {
      spans[i].addEventListener('click', clickFuncSpan);
    }
    for (var i=0; i<buttons.length; ++i) {
       buttons[i].addEventListener('click', clickFunc);
    }
   return false;
});



function clickFunc() {
 var selected = [];
 // alert(this.id); 
 // alert(this.previousElementSibling.innerHTML);
  $(this).closest('div').find("span").map(function(){
     if($(this).hasClass( "underline" )){
          selected.push($(this).html());
     }
  })
 console.log(selected.join(','));
}

function clickFuncSpan(e) {
 e.target.classList.add("underline");
}

span.underline {
  text-decoration: underline;
  color: blue;
}

span {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form action="">
<textarea id="myTextarea"></textarea>
   <input type="Submit" value="Form Submit" class="send-btn"/>
   <div class="container"></div>
   </form>
</body>

提交表单后，document.querySelectorAll

1 个答案: