javascript - jquery:使用 jquery 更改输入 val 不会影响输入拦截器

Question

伙计们!

让我们假设以下代码:

    $(document).ready(function() {
  var data = 'clients=&categories=&keywords=&limit='+limit;
  $.ajax({
    type: 'POST',
    url: 'index.php?ind=work&op=get_list',
    data: data,
    success: function (data) {
      $('.list').html(data);
      $('.thumb').click(function() {
    var idz = 'id='+$(this).attr('id');
    $.ajax({
      type: 'POST',
      url: 'index.php?ind=work&op=get_work',
      data: idz,
      success: function (data) {
        $('.client').click(function() {
          $('#clients').val($('.client').text());
        });
      }
    });
      });
    }
  });
});

$(document).ready(function() {
  $('input').on('change', function(){
    var clients = $('#clients').val(),
    data = 'clients='+clients;
    $.ajax({
      type: 'POST',
      url: 'index.php?ind=work&op=get_list',
      data: data,
      success: function (data) { $('.list').html(data);
    $('.thumb').click(function() {
      var idz = 'id='+$(this).attr('id');
      $.ajax({
        type: 'POST',
        url: 'index.php?ind=work&op=get_work',
        data: idz,
        success: function (data) {
          $('.work').hide().html(data).slideToggle('slow');
        }
      });
    });
      }
    });
  });
});

在页面的某处有一个输入和一些图像:

      <div class="work"></div>
      <input type="text" id="clients" name="clients">
      <div class="list">Some thumbnails that call index.php?ind=work&op=get_work</div>

现在，当我在输入中键入任何内容时，jquery 会在更改时拦截它并从 get_list 函数获取信息。它与 .keyup()、.change()、.on('change') 和 .on('input') 完美配合。

但是当我按下客户端名称(span with class="client")时，输入的#clients 发生了变化，但列表并未加载。

我有一种感觉，我错过了一些非常基本的东西:))

感谢提示!

Answer 1

如果您以编程方式更改 TextBox 的值，则不会触发更改事件。

要触发事件，您必须使用 change()

手动触发事件

更改此代码

 $('.client').click(function () {
     $('#clients').val($('.client').text());
 });

到

 $('.client').click(function () {
     $('#clients').val($('.client').text());
     $('#clients').change();
 });