无法触发绑定事件
我不明白为什么这个事件在用不同的方式多次尝试之后不会触发。我想要的是通过下拉菜单类别名称将我的事件绑定到第一个输入文本框的值的变化中。意思是当我从“类别列表”中选择"A或B或C“时，将更新为”第一输入“，事件将通过更改”第一输入“的值触发。
但我只能在“第一输入”的文本字段上按下一些键，但这不是我的要求。我的JSFIDDLE在这里，代码如下所示。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head>
<body>
<div class="col-md-3">
<label>CategoryName</label>
<select class="form-control" name="cat_id" id="cat_id">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div class="col-md-4">
FIRST Input<input type="text" name="take" id="take" class="form-control" placeholder="Take Value" />
</div>
<div class="col-md-4">
Give Output<input type="text" name="give" id="give" class="form-control" placeholder="Give Value" />
</div>
<script>
$(document).ready(function(){
$(function(){
$('body').on('click','#cat_id',function(){
var s =$('#cat_id').val();
var n = s.lastIndexOf(",");
var s2 = s.substring(n + 1);
$('#take').val(s2);
})
});
$('#take').bind('input selectionchange propertychange',function(){ alert($('#take').val());
});
});
</script>回答 2
Stack Overflow用户
发布于 2018-04-01 02:25:26
首先，不推荐bind，我怀疑您之所以使用它只是因为无法让on工作。不能让它工作的原因是因为change事件并不仅仅是因为在框中进行了更改而触发的。只有在方框失去焦点后才触发。
因此，如果以编程方式更改框中的值，则change事件根本不会触发，因为它从一开始就没有焦点。
获得您想要的东西的方法也是以编程方式触发更改事件，就像这样(我继续用on替换了您的on，并将您的click事件按应有的方式更改为change事件)：
$(document).ready(function() {
$(function() {
$('#cat_id').on('change', function() {
var s = $('#cat_id').val();
var n = s.lastIndexOf(",");
var s2 = s.substring(n + 1);
$('#take').val(s2).trigger('change');
})
});
$('#take').on('change', function(e) {
$('#give').val($('#take').val());
});
});要更清楚地了解change事件是如何工作的，请查看这个例子。
Stack Overflow用户
发布于 2018-04-01 02:12:29
我不明白你到底想实现什么，如果你想绑定你选择的选项，你应该使用“更改”，而不是点击jquery代码链接+示例。
如果您有兴趣绑定您的文本框，您应该使用select而不是单击。
更新
触发事件的一个小例子
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var selectedOption = '';
$("#optionSelect").change(function (e) {
selectedOption = $( "#optionSelect option:selected" ).text();
$("#testBtn").trigger("click");
});
$("#testBtn").click(function (e){
$("#first_input").val(selectedOption);
});
});
</script>
</head>
<body>
<select id="optionSelect">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button id='testBtn'>Test me</button>
<div id='test'></div>
<input type='text' id='first_input'/>
</body>
</html>https://stackoverflow.com/questions/49594032
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号