如何给图片加click事件 jquery代码

如何给图片加click事件 jquery代码,第1张

首先要给图片添加一个Id,之后在jquery中写如下代码:

$("#图片ID").click(function(){

alert("aa”)

})

或者

$("#图片ID").bind("click",function(){

alert("aa")

})

扩展资料:

Click 事件实际应用:

此事件是在一个对象上按下然后释放一个鼠标按钮时发生。它也会发生在一个控件的值改变时。

对一个 Form 对象来说,该事件是在单击一个空白区或一个无效控件时发生。对一个控件来说,这类事件的发生是当: 用鼠标的左键或右键单击一个控件。对 CheckBox, CommandButton, Listbox 或 OptionButton 控件来说,Click 事件仅当单击鼠标左键时发生。

通过按下箭头键或者单击鼠标按钮,对 ComboBox 或 ListBox 控件中的项目进行选择。

当 CommandButton,OptionButton 或 CheckBox 控件具有焦点时,按下 SPACEBAR 键。

当窗体带有其 Default 属性设置为 True 的 CommandButton 控件时,按下 ENTER 键。

当窗体带有一个 Cancel 按钮 — 其 Cancel 属性设置为 True 的 CommandButton 控件时,按下 ESC 键。

对控件按下一个访问键。例如,如果一个 CommandButton 控件的标题是 "&Go",则按下 ALT+G 键可触发该事件。 也可在代码中触发 Click 事件,通过: 将一个 CommandButton 控件的 Value 属性设置为 True。

将一个 OptionButton 控件的 Value 属性设置为 True。

改变一个 CheckBox 控件的 Value 属性的设置。

参考资料来源:百度百科:Click事件

需要把代码写在$(function(){ })中

<script type="text/javascript">

$(function(){

$("#tables").append("<tr><td id='_td"+1+"'><input name='' type='button' value='"+"张三"+"' style='border:0pxbackground:#FFFFFF' onclick ='alert(123)'/></td></tr>")

})

</script>

$(function(){ })的意思是等到所有的DOM元素可用了才执行javascript代码。楼主的代码,在还没加载#tables元素时就调用了jquery代码向一个不存在的#tables元素中添加内容,跟本找不到嘛

$(function(){ })也可以写成$(document).ready({ })

有2种方法:

最简单的方法就是直接在标签中写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')

})

注意绑定的事件,需要绑定在父元素。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11482700.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存