189 8069 5689
有2种方法：
创新互联公司是专业的沭阳网站建设公司，沭阳接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行沭阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
最简单的方法就是直接在标签中写onclick=""，但是这样写其实是有点low的，
第二种方式是通过给类名绑定一个事件。
p id="pLabel"新加一条/p
ul id="ulLabel"
li class="liLabel"aaa1/li
li class="liLabel"aaa2/li
li class="liLabel"aaa3/li
/ul
script type="text/javascript"
$("#pLabel").click(function(){
$("#ulLabel").append('li class="liLabel"aaaQ/li'); //动态像ul的末尾追加一个新元素
});
/script
方法一：使用live
live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如，通过脚本动态创建的元素。
$('.liLabel').live('click', function(){
alert('OK');
});
方法二：使用on
可以通过on方法绑定事件，可以绑定到它的父级或者body中，实现如下：
$("#ulLabel").on('click','.liLabel',function(){
alert('OK')
});
或者：
$("body").on('click','.liLabel',function(){
alert('OK')
});
注意绑定的事件，需要绑定在父元素。
在页面加载结束后，浏览器会通过js为dom元素添加事件。原生的js中使用 window.onload 方法;在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行操纵并调用执行它所绑定的函数。
那么它和window.onload有何不同呢？
window.onload是在网页中所有元素 加上所有资源 ++完全加++载到浏览器后才执行。
而$(document).ready()中绑定的事件是在 dom完全就绪 时就可以被调用，此时对于jQuery来说都是可以被访问的（关联的资源可能并没有被加载完毕）。
举个例子来说，在$(document).ready()中定义了图片的宽高，但由于此时图片还没有被加载完毕，此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load ()方法。
load()方法会在元素的onload事件中绑定一个处理函数，如果该处理函数绑定给window对象，则会在所有资源加载完毕后触发，如果load绑定在元素上则会在该元素加载完毕后触发。
既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢？
window.onload事件 每次只能保存对一个函数的引用 ，他会覆盖掉之前的函数，所以不能再现有行为上添加新的行为。如果引用了多个js文件，每个都需要window.onload方法就导致编码复杂。
使用$(document).ready()方法能够很好地解决这种问题，每次调用$document.ready()方法都会在现有行为上追加新的行为，这些行为会根据注册顺序依次执行。
jquery中添加事件
$(item).click(function(){}) //点击事件
$(item).hover(function(){}) //鼠标经过事件
$(item).mousemove(function(){}) //鼠标移动事件
但是给动态创建的元素添加事件就得使用on
$(document).on("click","item",function(){})
可以使用：$("#but").removeAttr("class");和$("#but").attr("class","but_test");来对标签进行元素的添加和删除。
为了直观性的看到结果，首先在css样式中，针对class选择该元素，之后添加相应的样式。
接下来，就给该button按钮添加一个点击事件，让它能过自由切换。
对该点击事件添加js函数。
运行后的结果为：
拓展资料：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。
第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。
首先要将阻止弹出函数绑定到目标元素上：
//阻止浏览器默认右键点击事件
$("div").bind("contextmenu",
function(){
return
false;
})
如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：
document.oncontextmenu
=
function()
{
return
false;
}
接下来就可以为元素绑定右击响应函数了：
$("div").mousedown(function(e)
{
console.log(e.which);
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
});
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
});
}
})
示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。
完整代码：
head
style
type="text/css"
div{
font-size:20px;
}
/style
script
src="../jquery.js"/script
script
$(function()
{
//阻止浏览器默认右键点击事件
/*document.oncontextmenu
=
function()
{
return
false;
}*/
//某元素组织右键点击事件
$("div").bind("contextmenu",
function(){
return
false;
})
$("div").mousedown(function(e)
{
console.log(e.which);
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
});
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
});
}
})
})
/script
/head
body
div
div
/div
/body
以上这篇jQuery自定义元素右键点击事件(实现案例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考，具体如下：
(function
($)
{
//
自定义itemtab事件
$.fn.bind
=
function(types,
data,
fn)
{
//
重载jQuery.fn.bind方法，用来截获绑定自定义事件的元素
if(typeof
types
==
'string'
'itemtab'
==
types)
{
var
itemTouchStart
=
-1;
//
touchstart位置
var
itemTouchMove
=
-1;
//
touchend位置，值为-1时表示未触发
var
itemTriggerDistance
=
0;
//
拖动距离阀值，若大于该值则为拖动列表，若小于等于该值则为点击列表项
var
itemMoved
=
false;
//
列表是否为拖动状态
$(this).bind('touchstart',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemMoved
=
false;
itemTouchStart
=
event.originalEvent.touches[0].pageX;
//
记录起始位置
}).bind('touchmove',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemTouchMove
=
event.originalEvent.touches[0].pageX;
//
当前拖动位置
//console.log('touchmove:',
itemTouchStart,
itemTouchMove,
itemMoved);
if(Math.abs(itemTouchMove
-
itemTouchStart)
itemTriggerDistance)
{
itemMoved
=
true;
//
列表被拖动
}
}).bind('touchend',
function
(event)
{
//console.log('itemMoved:',
itemMoved);
if(itemMoved)
{
//
列表被拖动过，非点击操作
return
true;
}
$(this).trigger('itemtab');
//
触发自定义事件
});
}
return
this.on(
types,
null,
data,
fn
);
//
这种做法具有侵入性，多个类似的代码会相互覆盖，可采用深度复制方式调用原$.fn.bind方法
}
})(jQuery);
希望本文所述对大家jQuery程序设计有所帮助。