NingG +

jQuery常用操作

常见问题

为元素绑定点击事件

下面几种方法:

疑问:出现上述现象的原因?几个参考来源:

方法1:

function retrieveTransNum() {
	$.ajax({
		type : 'get',
		url : appContext + '/nativepages/retrieveTransNum.do',
		//dataType : 'json',
		timeout : 2000,
		success : function(result) {
			$('#switch-area .mini-panel-body').append(result);
		}
	});
} 

$("#trans-num-li").bind("click", retrieveTransNum());

方法1(补充):

下面的示例代码是有效的,具体:

function retrieveTransNum() {
	$.ajax({
		type : 'get',
		url : appContext + '/nativepages/retrieveTransNum.do',
		//dataType : 'json',
		timeout : 2000,
		success : function(result) {
			$('#switch-area .mini-panel-body').append(result);
		}
	});
} 

$("#trans-num-li").bind("click", retrieveTransNum);

简要说明:

方法2:

$("#trans-num-li").bind("click", function retrieveTransNum() {
	$.ajax({
		type : 'get',
		url : appContext + '/nativepages/retrieveTransNum.do',
		//dataType : 'json',
		timeout : 2000,
		success : function(result) {
			$('#switch-area .mini-panel-body').empty().append(result);
		}
	});
});

方法3:

...
<li id="trans-num-li" onclick="retrieveTransNum()">
...

function retrieveTransNum() {
	$.ajax({
		type : 'get',
		url : appContext + '/nativepages/retrieveTransNum.do',
		//dataType : 'json',
		timeout : 2000,
		success : function(result) {
			$('#switch-area .mini-panel-body').append(result);
		}
	});
} 

方法4:

function retrieveTransNum() {
	$.ajax({
		type : 'get',
		url : appContext + '/nativepages/retrieveTransNum.do',
		//dataType : 'json',
		//timeout : 2000,
		success : function(result) {
			//针对CAP4J前端渲染框架,需要将获取的html片段,添加到.mini-panel-body中
			$('#switch-area .mini-panel-body').append(result);
		}
	});
}

$("#trans-num-li").bind("click", function(){
	retrieveTransNum();
});

方法5:

//命名函数之后,函数定义名称retrieveTransNum在下文中失效
var retrieveTransNumHandler = function retrieveTransNum() {
	$.ajax({
		type : 'get',
		url : appContext + '/nativepages/retrieveTransNum.do',
		//dataType : 'json',
		//timeout : 2000,
		success : function(result) {
			//针对CAP4J前端渲染框架,需要将获取的html片段,添加到.mini-panel-body中
			$('#switch-area .mini-panel-body').append(result);
		}
	});
}

$("#trans-num-li").bind("click", retrieveTransNumHandler);

思考

上述方法1方法4方法5中定义function时,有两种方式:

使用场景,参考:Javascript function declarations vs function operators;本质是javascript中函数声明、命名函数表达式,与事件绑定之间关系;

JavaScript中,function的用法,添加小括号:function_name()与不添加小括号:function_name,两者之间的关系:

绑定多个点击事件

直接调用多次click(function(){})方法即可:

$(document).ready(function (){

	$(".div2").click(function() {
		initDiv();
		//initDivLi();
		//当前被点击的div改变背景色
		$(this).css("background", "rgb(194, 203, 207)");
		//取消当前div的mouseout和mouseover事件
		$(this).unbind("mouseout");
		$(this).unbind("mouseover");
	});
	
	$(".div2").click(
		function() {
			$(this).next("div").slideToggle("slow").siblings(
					".div3:visible").slideUp("slow");
			/* $(this).next("div").slideToggle("normal"); */
		});
	
});

思考:当为元素绑定多个click事件时,如何进行区分事件的执行顺序?按照绑定先后顺序来执行,参考官网.

特别说明,JS中绑定多个事件时,会造成较大的内存消耗,具体参考:

参考来源

Top