div、span绑定内容改变事件

内容改变事件onchange只适用于form表单标签(input、select、textarea)

当需要对div、span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法,代码如下:

 1 <meta charset="UTF-8">
 2 <script src="jquery.min.js"></script>
 3 <span id="s">
 4 <span id="d" style="width:100px;height:100px">1</span>
 5 </span>
 6 <script>
 7 $("#d").click(function(){
 8     $(this).html(2);
 9 })
10 $("#d").bind(‘DOMNodeInserted‘,function(){
11
12     alert(‘改变了!‘);
13 })
14 </script>

小贴士:在项目中有一个需求是适用layer弹窗给父页面传值,父页面被传值后页面进行JS刷新,这里layer不能只传value或innerhtml,要传输text(文本值)才能被这个绑定的内容改变时间监听到,可见DOMNodeInserted的内容选择没有那么简单

时间: 2024-10-15 18:19:24

div、span绑定内容改变事件的相关文章

JS来推断文本框内容改变事件

   oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur):    onpropertychange的话,仅仅要当前对象属性发生改变,都会触发事件,可是它是IE专属的: oninput是onpropertychange的非IE浏览器版本号,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并不是该对象全部

vue实现动态绑定class--(三目运算符)根据span数字内容改变其样式

一.根据span数字内容改变数字本身样式(两种样式) <template> //使用三目运算符,判断当span的val是否小于0给其不同的class名 <span class="inOut" :class="abc.upgold<0?'inColor':'outColor'">得分:{{abc.upgold}}</span> </template> <style scoped> .inColor{ c

jquery文本框内容改变事件

/** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发. */ $("#inputid").change(function(){ console.log($(this).val()); }); /** * 只要文本类容发生改变,就会触发该事件 */ $("#inputid").bind("input propertychange",function(){ console.log($(this).val()); });

checkbox:click事件触发span元素内容改变

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="jquery.js"></script> </head> <body> <p>我想去<span id="

JS、JQury - 文本框内容改变事件

例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&

easyui textbox 内容改变事件 增加oninpu 类似事件,

//======================利用easyui验证功能,进行内容变化监控=== =============$(function () { var CustomerService = $.parseJSON($('#CustomerService').val()); $.extend($.fn.validatebox.defaults.rules, { //校验正整数,并计算码洋 calculateMY: { validator: function (value) { var d

div/span等获取焦点问题(tabindex属性的简单理解)

1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地段的时候,input输入框并没有失去焦点(或者说区域的div没有获得焦点),就出现了键盘显示在弹层的上面导致无法选择的bug 解决办法有两个: a:循环所有的input等可以获取焦点的元素,让他们失去焦点(blur); b:点击区域选择地段的时候让div获取焦点,从而解决input不失焦的问题: 在这里对于普

&lt;span&gt; &lt;div&gt; 局部 keydown ,keyup事件。页面部分div $(document) 无效,可能焦点,添加焦点。

前天改一个bug, js 实现的一个 面板拖拉,左右各两个列表,中间面板画线连接,页面左侧列表选中后,key 事件无效.右侧选中确有效,很奇怪,查看源码,左侧选中后,$(document).on("keydown",function(event){}    对左侧无效,由于无异常抛出,只能一点点代码.一个字,累. 确定页面部分div失去焦点,索性,给外面最大div  添加一个 获取焦点事件,解决 . $("#myspan").attr("tabindex&

同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴

实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象的属性改变(由键盘或鼠标触发)且对象失去焦点 3.onpropertychange 当前对象属性改变就会触发 缺陷:只支持低版本IE 4.oninput 和onpropertychange类似,当前对象属性改变就会触发