Question

function srclist(objs){
    $('.searchnode').children().remove()
    $('.subnode').children().remove()    
    if(objs.length>0){

        for(i=0;i<objs.length;i++){
            $('<div name="'+objs[i]._id+'"class="srcoption">'+objs[i].title+'</div>').appendTo('.searchnode')
        }

        $('.searchnode').on('click','div.srcoption',()=>{
           console.log($(this).name)
        })
    }
}

console.log（$（this）.name）这不起作用

console.log（'hello'）->运行正常

我需要以动态元素名称thx为您提供帮助

Answer 1

不要在那里使用箭头功能。箭头函数不会将此this绑定到该函数。将其更改为正常功能即可正常工作。

    $('.searchnode').on('click','div.srcoption',function(){
       console.log($(this).attr('name'))
    })

参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

箭头函数表达式的语法比函数表达式短，并且没有自己的this，arguments，super或new.target。这些函数表达式最适合非方法函数，因此不能用作构造函数。

var objs = [
  { _id: '1', title: 'Title 1' }
  , { _id: '2', title: 'Title 2' }
];

for (i = 0; i < objs.length; i++) {
  $('<div name="' + objs[i]._id + '"class="srcoption">' + objs[i].title + '</div>').appendTo('.searchnode')
}

$('.searchnode').on('click', 'div.srcoption', function(){
  console.log($(this).attr('name'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchnode"></div>

Answer 2

避免在点击事件回调中使用箭头功能。

箭头函数表达式的语法比函数表达式短，并且没有它自己的...（Arrow Functions）

$('.searchnode').on('click','div.srcoption',function(){
    console.log($(this).attr('name'))
})

Answer 3

在此行

$('<div name="' + objs[i]._id + '"class="srcoption">' + objs[i].title + '</div>').appendTo('.searchnode')

名字后面应该有一个空格

$('<div name="' + objs[i]._id + '" class="srcoption">' + objs[i].title + '</div>').appendTo('.searchnode')

代替

$('.searchnode').on('click','div.srcoption',()=>{
           console.log($(this).name)
})

您可以直接定位到“ srcoption”类

 var container=$('.searchnode');
 for(i=0;i<objs.length;i++){
            var _div=$("<div/>",{
               id:objs[i]._id,
               class: "srcoption", 
               text:objs[i].title   
            })
            _div.attr("name",objs[i]._id);
            container.append(_div);
        }
  $('.srcoption').on('click',function(){
               console.log($(this).attr('name'))
    });

动态元素上的jQuery单击事件不适用于变量

3 个答案: