search

Home  >  Q&A  >  body text

javascript - this pointing problem in jquery event binding

code show as below:


$(function(){
                $.ajax({
                    type:"GET",
                    url:"/msg",
                    success:function(data){
                        var html="";
                        for(var o of data){
                            html+=`
                                <tr>
                                    <td>${o.mid}</td>
                                    <td>${o.uname}</td>
                                    <td>${o.content}</td>
                                    <td>${o.pubtime}</td>
                                    <td>
                                        <a class="btn-del" href="${o.mid}">删除</a>
                                    </th>
                                </tr>
                            `;
                        }
                        $("#tb1").html(html);
                    }
                });

                $("#tb1").on("click","a.btn-del",(e)=>{
                    e.preventDefault();
                    //var mid=this.getAttribute("href");
                    console.log(this);
                });
            });

I need to bind the deletion event to a.btn-del generated by the asynchronous request, and I need to get the herf attribute value of the currently clicked element; it can be obtained through e.target; but it cannot be obtained through this. After console.log(this), output #document.

Isn’t this in the event proxy pointing to the currently clicked element? ?

習慣沉默習慣沉默2697 days ago798

reply all(4)I'll reply

  • 巴扎黑

    巴扎黑2017-06-26 10:59:25

    Change (e)=> {} to function(e){} and have a look.

    You should first understand the binding mechanism of this.

    This in arrow functions points to the outer function scope.

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-26 10:59:25

    The following are several ways to call js functions:

    var func = function(a,b){
        console.log(this); 
        console.log(a + ' ' + b)
    };
    
    var self = 'test';
    func(1,2);   // this 是 window 对象, 因为此时调用函数的是window对象
    func.call(self,1,2);  // this是 字符串  'test'
    func.apply(self,[1,2]); // this是 字符串  'test'

    JS is not an object-oriented language. Compared with Java, the syntax of object-oriented implementation is a bit strange.
    If the function is called as func(), the value of this depends on the object in which the function is called.
    When setting the callback function, if the this parameter is not passed, it is the calling method of func(). The general writing method should be to use another variable to save the value of this, usually the variable name is self.

    var self = this;
    XXXX.callback = function(){
        console.log(self);
    };

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-06-26 10:59:25

    If you want to call jq's method, you should use $(this) to represent the jq object

    reply
    0
  • 扔个三星炸死你

    扔个三星炸死你2017-06-26 10:59:25

    获取href :
    
     this.hash 

    reply
    0
  • Cancelreply