Question

我无法弄清楚为什么在多次尝试不同方式后未触发此事件。我想要的是通过下拉菜单Category Name将我的事件与FIRST INPUT文本框的值更改绑定。表示当我从“类别列表”中选择“A或B或C”时，将更新为“第一次输入”，并且该事件将通过更改“第一次输入”的值来触发。

但是当我在“First Input”的文本字段上按某个键时，我才卡住了，但这不是我的要求。我的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>

Answer 1

首先，bind已被弃用，我怀疑您只是使用它，因为您无法让on工作。您无法使其发挥作用的原因是因为change事件不会因为框中的更改而触发。它只在盒子失去焦点后触发。

因此，如果您以编程方式更改框中的值，则change事件根本不会触发，因为它从未在第一时间内获得焦点。

获得所需内容的方法是以编程方式触发更改事件，如此（我继续使用bind替换您的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事件的工作原理，请查看this example。

Answer 2

我不明白你想要达到什么目标，如果你想绑定你应该使用的选项，那么＃34;改变＆＃34;而不是单击您的jquery代码 link + example

如果您有兴趣绑定文本框，则应使用select而不是单击

link + example

<强>更新

触发事件的一个小例子

<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>

无法触发绑定事件

2 个答案: