在Javascript中绑定for循环中的单击事件时出错_Javascript_Jquery

在Javascript中绑定for循环中的单击事件时出错

javascript jquery

在Javascript中绑定for循环中的单击事件时出错,javascript,jquery,Javascript,Jquery,我试图在alert onclick中获取数组元素（可能是对象）。但是，消息在单击时不绑定此.openLink（）方法未获取消息的警报和正确值绑定单击事件时，我在此处缺少某些内容 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我试图在alert onclick中获取数组元素（可能是对象）。但是，

消息

在单击时不绑定

此.openLink（）方法

未获取消息的警报和正确值

绑定单击事件时，我在此处缺少某些内容

<!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>


函数myBox（）{
this.create=（id、id3、arrData）=>{
var html=“”；
$（“#框”）.append（html）；
var html1=“”；
$（“#框”）.append（html1）；
this.createList（id、id3、arrData）
}
this.createList=（id、id3、arrData）=>{
var html=''；
html+='；
对于（变量i=0；i；
html+=arrData[i]；
html+=''；
}
html+=''；
$（id3）.append（html）；
//-->这里，绑定li上的单击事件时出现一些错误
arrData.forEach（（元素）=>{
$（文档）。在（'单击'，'#'+iD，（）=>{
这个.openLink（元素）；
});
});
}
this.openLink=（消息）=>{
警报（消息）；//a、b、c、as、bqsq、csqs您正在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（）之外

函数myBox（）{
this.create=（id、id3、arrData）=>{
var html=“”；
$（“#框”）.append（html）；
var html1=“”；
$（“#框”）.append（html1）；
this.createList（id、id3、arrData）
}
this.createList=（id、id3、arrData）=>{
var html=''；
html+='；
对于（变量i=0；i”；
html+=arrData[i]；
html+=''；
}
html+=''；
$（id3）.append（html）；
}
}
openLink=（消息）=>{
警报（消息）；//a、b、c、as、bqsq、csqs您的浏览器控制台中是否收到任何错误？没有，但“c”和“csqs”的单击事件仅对li中的其他值发生，并且它会连续引发3次警报。谢谢，我错过了它。但是我们是否可以直接绑定html+=“
；where元素可能是数组中的对象。如果可能的话，您可以帮助吗。var arrData=[{“key1”：“2”}，{“key1”：“3”}]；var arrData2=[{“key1”：“4”}，{“key1”：“6”}]；openLink=（message）=>{alert（JSON.stringify（message））；alert（message key1）；}var arrData var=[{“key1”：“2”}，{“key1”：“3”}]；var arrData[{“key1”：“4”}，{“key1”：“6”}]；是的，因为您现在将数据编码到一个对象中，所以您需要调用referent键来获取值。[{“key1”：“2”}，{“key1”：“3”}]！==[“2”，“3”]
如果我们需要像{“id:“upctings”，“utces:[“Setupow at pm 9”]，“api:“api/”这样传递对象，该怎么办onclick。我们通常在函数调用中传递对象。我们如何实现这一点。然而，当我们在forEach中使用绑定时，我们可以传递对象。请您指导。