jquery 中 change input 事件失效

最新推荐文章于 2023-05-22 01:43:47 发布
原创 最新推荐文章于 2023-05-22 01:43:47 发布 · 1.9w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了一个关于使用jQuery监听动态生成的input输入框内容变化的问题，并分享了解决方案。作者发现由于DOM元素生成和监听绑定的时机不匹配导致无法正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天工作的时候 遇到了用jquery选择 input输入框， 监听input中的内容变化，然后将input中的内容获取到，赋值给另一个input输入框。


这种逻辑本来很简单的。代码如下：

$(".showProductInfo").append("<tr>"
+"<td></td>"
+"<td>批量设置</td>"
+'<td><input type="number" class="product_info" name="setPrice" id="setPrice" onchange="setprice()" value="" /></td>'
+'<td><input type="number" class="product_info" name="setStock" id="setStock" value="" /></td>'
+"</tr>");

$('input[name=setStock]').on("change",function(){
   console.log($('[name=setStock]').val());
   $('[name=stock]').val($('#setStock').val());
});

我是尽量确保前面一段代码在后一段代码之前加载了，但是通过这种方式 选择不到 id=setStock的input输入框。

..............

十分钟后

我发现

$(".showProductInfo").append("<tr>"
+"<td></td>"
+"<td>批量设置</td>"
+'<td><input type="number" class="product_info" name="setPrice" id="setPrice" onchange="setprice()" value="" /></td>'
+'<td><input type="number" class="product_info" name="setStock" id="setStock" value="" /></td>'
+"</tr>");这段代码是在一个按钮出发的，


但是$('input[name=setStock]').on("change",function(){   console.log($('[name=setStock]').val());   $('[name=stock]').val($('#setStock').val());});我是反在了script标签的尾部了。所以按钮没有点击之前，这段代码就已经执行了，此时上面的
$(".showProductInfo").append()还没有执行！！！


原因找到了！
为了找到原因我还专门把第一个setprice（）方法写到html中，变成html事件处理事件。 唉低级错误！！记录一下！共勉！




















                

        

    

    
  



    



                



	

		

			

				
					
Layui中change事件不生效

				
			

			

				

					雾林小妖的博客
				

				

					05-02
					
					1304
					
				

			

		

		

			
				
Layui中通过jQuery为select下拉框绑定change事件不生效

			
		

	



                

            
              



	

		

			

				
					
radio的change事件失效

				
			

			

				

					m0_52813455的博客
				

				

					05-12
					
					1599
					
				

			

		

		

			
				
应该绑定ifChecked事件
$("input[name='radioName']").on('ifChecked', function(event){
        test();
});




			
		

	



              


  
              

                


	

		

			

				
					
jQuery不兼容input的change事件问题解决过程

				
			

			

				

					10-25
				

			

		

		

			
				
本文记录了在项目中发现在IE9中不会立即触发change事件，存在兼容问题的解决过程，非常的详尽，解决过程中也有新问题出现，最终都解决完毕，完美实现了兼容各大主流浏览器

			
		

	





	

		

			

				
					
关于jQuery中给input赋值，手动触发它的change事件却没反应的问题

				
			

			

				

					weixin_43165220的博客
				

				

					06-16
					
					4821
					
				

			

		

		

			
				
我在js文件中，通过$(parent.frames[“commonViewContent”].contentDocument).find("[name=‘inputName’]");拿到了我要赋值的input。
var $commonViewContent=$(parent.frames["commonViewContent"].contentDocument);
var $input = $commonViewContent.find("[name='inputName']");
$input.val(v

			
		

	



		

			
		



	

		

			

				
					
解决JQuery中input的change(onchange)无法触发的问题

				
			

			

				

					ITRider的专栏
				

				

					11-06
					
					1万+
					
				

			

		

		

			
				
1.在用div模拟select的情况下，可以使用input.bind('change')，然后在模拟选项被选中后的事件中出发此input的change事件，触发方法input.trigger('change');
2.使用input.bind('propertychange', function(){your code;}); 这个是input的change事件方法，可以用来实时检测数据，例如是

			
		

	





	

		

			

				
					
Jquery 修改input值不起作用

				
			

			

				

					weixin_48324006的博客
				

				

					05-22
					
					714
					
				

			

		

		

			
				
根据DOM Level 2事件规范:当控件失去输入焦点并且它的值在获得焦点后被修改时，就会发生更改事件。这意味着change事件被设计为通过用户交互来触发更改。编程更改不会导致激发此事件。

			
		

	





	

		

			

				
					
Jquery input onchange无效问题解决方法

				
			

			

				

					easyboot的专栏
				

				

					01-03
					
					4565
					
				

			

		

		

			
				
想通过JS改变input的值，同时触发onchange，发现onchange没有触发，
原因是onchange需要失去焦点后才会触发。
在网上搜索发现只有使用trigger简单方便，
在设置input的时候加入$('#input').trigger("change");
 就OK了

function setinput(str)
{
  $('#input').val(str)
  $('#in...

			
		

	





	

		

			

				
					
解决layui中onchange失效以及form动态渲染失效的问题

				
			

			

				

					01-19
				

			

		

		

			
				
最近在使用layui框架做城市的三级级联的时候，发现jquery中的onchange事件方法在layui框架中失效了。 然后浏览layui社区，了解到layui监控一个控件变化有自己的方法。 html  <select lay-filter=test></...

			
		

	





	

		

			

				
					
jquery文本框change事件无效

				
			

			

				

					tianya111cy的专栏
				

				

					06-07
					
					1094
					
				

			

		

		

			
				
$("input[name='from']").change(function(){
   alert("==");
});
change事件不起作用，可用如下方法（但是下面的方法仅对IE适用）
$("input[name='from']").bind("propertychange", function() {   alert("==");  });...

			
		

	





	

		

			

				
					
Jquery.fn.val()方法改变元素值后元素change事件无效解决方案

				
			

			

				

					Kemin
				

				

					04-13
					
					4217
					
				

			

		

		

			
				
html:

jqeury:
$("input").val(Math.random());
onchange事件并不会被触发，可以手动调用focus()和blur()，不过这种方法太麻烦了
解决方案：
$("input").val(Math.random()).change();//手动触发change事件就可以啦！

			
		

	





	

		

			

				
					
JQ JS 改变value值不触发change事件

					
热门推荐

				
			

			

				

					landylxy的博客
				

				

					09-14
					
					1万+
					
				

			

		

		

			
				
JQ改变value值不触发change事件
 
Change事件触发有两个必要条件：值改变、失去焦点。所以当使用JQ改变值时，控件没有失去焦点，所以不会触发。
 
目前验证有效的解决办法，只能是手动触发change事件

如：
$('input[name="change_val"]').click(function(){
$('input[name="a"]').val('a');

			
		

	





	

		

			

				
					
Jquery:Js 赋值input onchange  oninput事件用不了及解决措施

				
			

			

				

					Rain
				

				

					11-14
					
					1万+
					
				

			

		

		

			
				
Js 赋值input onchange oninput事件用不了解决措施
事件了解：
onchange：
正常触发:  值改变后，必须失去焦点
oninput:
正常触发： 事件在用户输入时触发
分析为什么不能用：

当readOnly的input 充当下拉框的时候，onchange 与 oninput的事件都不能用。猜测是不能获取焦点。导致的onchange事件不能正常用。
oninput是必须...

			
		

	





	

		

			

				
					
js动态改变input的值不触发input的change事件的解决办法

				
			

			

				

					qq_36412715的博客
				

				

					12-19
					
					1万+
					
				

			

		

		

			
				
input通过键盘改变值会自动触发change事件，但通过js动态改变值后，不会自动触发，需要手动触发change事件。
1.通过js赋值后手动触发/手动监听
<input type="text" />
<button>赋值</button>
<script src="js/jquery.min.js"></script>
<scr...

			
		

	





	

		

			

				
					
input  onchange事件不触发  oninput  onpropertychange  onchange 实时监听

				
			

			

				

					huch的博客
				

				

					06-05
					
					6543
					
				

			

		

		

			
				
做前端的同学，经常会跟输入框打交道，免不了要做实时监听文本输入的需求。

Android中实现

obj.addTextChangedListener(new TextWatcher() {
   @Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
...
}
@Ove...

			
		

	





	

		

			

				
					
html input的file文件输入框onchange事件触发一次失效解决方法

				
			

			

				

					weixin_33943347的博客
				

				

					11-16
					
					874
					
				

			

		

		

			
				
最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~
于是想办法解决它~
在网上找了一些资料，找到这几种方法：
1、替换掉原来的input框2、remove原来的input框，然后在添加进新的一样的input框
我测试了之后发现可以用下面的方法解决这个问题：第一步：上传完成后替换掉原来的input...

			
		

	





	

		

			

				
					
jquery多种方式实现输入框input触发事件之oninput,onpropertychange,onchange事件及区别...

				
			

			

				

					赏樱看雪撸代码
				

				

					11-14
					
					2643
					
				

			

		

		

			
				

			有关inputs输入内容的事件监听，一般我们会想到下面几个关键词：oninput,onpropertychange,onchange
oninput与onchange的一个区分
oninput:该事件在 &lt;input&gt; 或 &lt;textarea&gt; 元素的值发生改变时触发(立即触发);
onchange:该事件在在 &lt;input&gt; ，&lt;textare...

			
		

	





	

		

			

				
					
jquery input的checked状态

					
最新发布

				
			

			

				

					06-28
				

			

		

		

			
				
<think>我们讨论的是jQuery中如何操作input元素的checked状态。在jQuery中，我们可以使用prop()方法来获取或设置checked状态。这是因为checked属性是一个布尔属性（booleanattribute），使用prop()方法可以正确地反映其当前状态（true或false）。注意：不要使用attr()方法，因为attr()方法获取的是初始状态（即HTML中设置的checked属性值），而不会随着用户交互改变。prop()方法则能够获取和设置当前的布尔状态。示例代码：1.获取checkbox的checked状态：var isChecked =$('#myCheckbox').prop('checked');2.设置checkbox为选中状态：$('#myCheckbox').prop('checked', true);3.设置checkbox为未选中状态：$('#myCheckbox').prop('checked',false);4.使用prop()方法也可以用来设置多个checkbox：$('.checkboxes').prop('checked',true);//选中所有class为checkboxes的元素5.使用attr()方法会有什么问题？//设置初始状态，但之后状态改变时，attr()不能正确反映//初始设置可以使用attr，但动态改变后获取状态应该避免使用attr//例如：//初始设置：<input type="checkbox" checked="checked">//使用attr('checked')会返回'checked'（字符串），而不管当前是否选中//使用prop('checked')则会返回true或false解释：-为什么使用prop()而不是attr()？因为checked属性是一个典型的“property”（当前状态）而不是“attribute”（初始值）。在jQuery中，prop()用于处理DOM元素的属性（properties），而attr()用于处理HTML属性（attributes）。对于动态改变的属性，如checked、selected、disabled等，应该使用prop()。另外，在事件处理中，我们可以监听change事件来响应checked状态的改变：$('#myCheckbox').change(function() {if($(this).prop('checked')) {//当选中时执行的操作}else {//当取消选中时执行的操作}});或者也可以使用this.checked（原生属性）：$('#myCheckbox').change(function() {if(this.checked) {//...}});注意：在jQuery1.6之前，attr()方法被用于获取属性，包括checked。但自1.6版本开始，prop()被引入以区分属性和属性。因此，对于jQuery1.6及更高版本，推荐使用prop()。示例：一个完整的操作checkbox的代码HTML:<inputtype="checkbox"id="check1"> Checkme<button id="btnCheck">Check</button><button id="btnUncheck">Uncheck</button><button id="btnToggle">Toggle</button>JavaScript(jQuery):$(document).ready(function(){//获取状态$('#check1').change(function() {console.log('当前状态: '+ $(this).prop('checked'));});//设置为选中$('#btnCheck').click(function(){$('#check1').prop('checked',true);});//设置为未选中$('#btnUncheck').click(function() {$('#check1').prop('checked', false);});//切换状态$('#btnToggle').click(function() {var$cb= $('#check1');$cb.prop('checked', !$cb.prop('checked'));});});相关问题：1.在jQuery中，prop()和attr()有什么区别？2.除了checked，还有哪些属性应该使用prop()而不是attr()？3.如何用jQuery选中一个radio button？4.如何用jQuery获取select元素的选中值？注意：按照要求，相关问题必须严格遵循格式，并且只提出4个问题。</think>### jQuery 操作 input 的 checked 状态

在 jQuery 中操作 `input[type="checkbox"]` 或 `input[type="radio"]` 的选中状态，需使用 `.prop()` 方法而非 `.attr()`。原因如下：

1. **`.prop()` vs `.attr()` 的区别**  
   - `.prop()` 操作 DOM 元素的**当前属性**（实时布尔值 `true/false`）  
   - `.attr()` 操作 HTML 元素的**初始属性**（字符串 `"checked"` 或 `undefined`）  
   - 用户交互会改变 DOM 属性，但不会更新 HTML 属性（例如：用户勾选后，`checked="checked"` 仍存在）

2. **正确操作方式**  
   ```javascript
   // 获取 checked 状态（返回布尔值）
   const isChecked = $('#myCheckbox').prop('checked');

   // 设置 checked 为 true（选中）
   $('#myCheckbox').prop('checked', true);

   // 设置 checked 为 false（取消选中）
   $('#myCheckbox').prop('checked', false);

   // 切换 checked 状态
   $('#myCheckbox').prop('checked', (i, val) => !val);
   ```

3. **错误示例（勿用 `.attr()`）**  
   ```javascript
   // ❌ 错误：仅返回初始状态（用户交互后失效）
   $('#myCheckbox').attr('checked'); // 返回 "checked" 或 undefined

   // ❌ 错误：设置后无法正确取消选中
   $('#myCheckbox').attr('checked', 'checked'); // 取消需 removeAttr()
   ```

4. **监听状态变化**  
   使用 `change` 事件监听选中状态变化：  
   ```javascript
   $('#myCheckbox').change(function() {
     if ($(this).prop('checked')) {
       console.log("选中状态");
     } else {
       console.log("未选中状态");
     }
   });
   ```

### 完整示例
```html
<input type="checkbox" id="testCheckbox"> 
<button id="btnCheck">选中</button>
<button id="btnUncheck">取消</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 获取状态
  console.log("初始状态:", $('#testCheckbox').prop('checked')); // false

  // 设置选中
  $('#btnCheck').click(() => {
    $('#testCheckbox').prop('checked', true);
  });

  // 设置取消
  $('#btnUncheck').click(() => {
    $('#testCheckbox').prop('checked', false);
  });

  // 监听变化
  $('#testCheckbox').change(function() {
    console.log("当前状态:", $(this).prop('checked'));
  });
</script>
```

### 关键原因总结
- **DOM 属性 vs HTML 属性**：  
  HTML 的 `checked="checked"` 是**初始值**，DOM 的 `checked` 是**当前状态**（随用户交互变化）。  
- **jQuery 的设计**：  
  `.prop()` 直接操作 DOM 属性，而 `.attr()` 仅操作静态 HTML 属性，因此 `.prop()` 能准确反映实时状态。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值