Question

我试图在警报onclick中获取数组元素（可能是对象）。但是，message在点击时没有约束力。

this.openLink() method没有收到message和正确值的警报。

绑定点击事件时，我在这里丢失了一些东西吗？

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script> 

     function myBox(){

     this.create = (id, id3 , arrData) => {
     var html = "<div id='box1' class='col-12'></div>";
     $("#box").append(html);
      var html1 = "<div id='box2' class='col-12'></div>";
     $("#box").append(html1);
     this.createList(id, id3 , arrData)

     }

     this.createList = (id, id3 , arrData) =>{
     var html = '';
         html +='<ul id="' + id + '_List" class="col-12 rmpm" style="overflow-x:scroll;overflow-y:hidden;list-style-                 type:none;white-space:nowrap;font-size:0;padding: 0px 0px 10px 0px;">';
          for (var i = 0; i < arrData.length; i++) {
             var iD = id + '_utt' + i;
          html += '<li  id="' + iD + '"   class="col-12 rmpm" style="display:inline;width:auto;border:1px solid         #ccc;display:inline-block;font-size:14px;padding: 5px;border-radius: 5px;margin: 10px 10px 10px 0px; cursor: pointer;">';
          html += arrData[i];
          html += '</li>';
        }
          html += '</ul>';
          $(id3).append(html);

// ---> here, some error for binding click event on li

          arrData.forEach((element) => {
            $(document).on('click', '#' + iD, () => {
              this.openLink(element);
            });
        });
     }

     this.openLink = (message) =>{
      alert(message); //a,b,c,as,bqsq,csqs  <--- alert expecting here
     }
     }


    </script> 
    <script>
    function abc(){
      var  arrData = ['a','b','c'];
      var arrData2 = ['as','bqsq','csqs'];
     var bx = new myBox();
       bx.create('arrData',"#box1" , arrData);
         bx.create('arrData2',"#box2" , arrData2);
    }

    </script> 
    </head>
    <body>
    <button onclick="abc()">Clcik</button>
    <div id="box" style=""></div>

    </body>
    </html>

Answer 1

您要在foreach上方的for循环中组装ID，然后使用该ID来设置clicklistener，您需要在foreach的每个循环中组装正确的ID，否则您只会在其上放置一个侦听器最后一个按钮。

将forEach更改为此：

arrData.forEach((element, index) => {
var clickId = id + '_utt' + index;
  $(document).on('click', '#' + clickId, () => {
    this.openLink(element);
  });
});

要将其作为onclick="function()"放入html中，您需要在创建HTML时在第一个循环中对其进行分配。并将openlink移到myBox()之外

function myBox() {

  this.create = (id, id3, arrData) => {
    var html = "<div id='box1' class='col-12'></div>";
    $("#box").append(html);
    var html1 = "<div id='box2' class='col-12'></div>";
    $("#box").append(html1);
    this.createList(id, id3, arrData)

  }

  this.createList = (id, id3, arrData) => {
    var html = '';
    html += '<ul id="' + id + '_List" class="col-12 rmpm" style="overflow-x:scroll;overflow-y:hidden;list-style-                 type:none;white-space:nowrap;font-size:0;padding: 0px 0px 10px 0px;">';
    for (var i = 0; i < arrData.length; i++) {
      var iD = id + '_utt' + i;
      html += '<li ' + 'onclick="openLink(\'' + arrData[i] + '\')" id="' + iD + '"   class="col-12 rmpm" style="display:inline;width:auto;border:1px solid         #ccc;display:inline-block;font-size:14px;padding: 5px;border-radius: 5px;margin: 10px 10px 10px 0px; cursor: pointer;">';
      html += arrData[i];
      html += '</li>';
    }
    html += '</ul>';
    $(id3).append(html);
  }
}

openLink = (message) => {
  alert(message); //a,b,c,as,bqsq,csqs  <--- alert expecting here
}

function abc() {
  var arrData = ['a', 'b', 'c'];
  var arrData2 = ['as', 'bqsq', 'csqs'];
  var bx = new myBox();
  bx.create('arrData', "#box1", arrData);
  bx.create('arrData2', "#box2", arrData2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<body>
  <button onclick="abc()">Clcik</button>
  <div id="box" style=""></div>
</body>

'+'onclick =“ openLink（\''+ arrData [i] +'\'）”。这是如何工作的。您能解释一下还是提供一些链接，以便我理解

该行呈现为onclick="openLink('a')" onclick="openLink(呈现给DOM的形式。 \'在DOM中呈现一个'，而javascript将其视为一个字符，这样我就不会破坏字符串，但在DOM中却呈现为'。然后我添加arrData[i]，它是数组中的第n个（或第i个）索引。然后我使用相同的技巧关闭onclick功能。

错误绑定Java事件中的for循环中的Click Event

1 个答案: