关于on事件监听方式

前几天写web备忘录的时候被on事件监听方式弄晕了
(“#q_ul”).on(‘click’,’li’,function(){  
        var $this=$(this);  
        console.log(‘$this',$this);  
        //nodeName”LI”,点击的是li,那么这个this指的就是li  
})(function(){
(‘.add-task’).on(‘click’,’button[type=submit]’,function(){  
                    alert(1);  
                    var $this=$(this);  
                    console.log(‘$this',$this);//context:button  
                })  
})  
下面是不合理的(function(){
var data={};
(‘.add-task’).on(‘submit’,function(){  
                    alert(1);  
                    var $this=$(this);  
                    console.log(‘$this',$this);//context:button  
                    data.content=$this.find(‘[name=content]’).val();  
                    console.log(data);//点击之后，没有输出  
                })  
})  
以下情况也不合理(function(){
var data={};
(‘.add-task’).on(‘click’,’[type=submit]’,function(){  
                    alert(1);  
                    var $this=$(this);  
                    console.log(‘$this',$this);//context:button  
                    data=$this.find(‘[name=content]’).val();  
                    console.log(data);//undefined  
                })  
})  
下面才是正确的(function(){
var data={};//空字符串对象
(‘.add-task’).on(‘click’,’[type=submit]’,function(){  
                    alert(1);  
                    varthis=(this);console.log(‘this',this);data.content=this.find(‘[name=content]’).val();//给空字符串对象自定义属性 类似于轮播图的.index属性
console.log(data);//输出相应的文字
})
})