Question

我想在用户点击选择控件后调用ajax函数，或者select控件从键盘获得焦点。

HTML代码如下：

<select id="scanner" name="scanner" class="form-control"></select>

我写的jQuery-AJAX函数如下，但aler（＆＃34; Hello＆＃34;）没有被打印出来。为什么呢？

 $("#scanner").bind("change",function() { alert("Hello");

    var mod_url = $('#mod_url').val(); 

    $.ajax({
      url : mod_url,
      cache: false,
      dataType: "json",
      type: "GET",
      async: false,
      data: {
        'request_type':'ajax', 
        'op':'get_all_stores'
      },
      success: function(result, success) { alert(result);
        $('#scanner').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });
  });

Answer 1

在code我没有看到任何options html select框

而且，您已在change框中注册了select个活动，该活动仅在选择options框中的select时才会出现

在选择框中添加少量options并尝试选择将触发ajax调用的选项

请参阅JS FIDDLE HERE

Answer 2

我认为你应该这样做：

 $("#scanner").bind("focus", function() { 
    alert("Hello");
    var mod_url = $('#mod_url').val(); 
    $.ajax({
      url : mod_url,
      cache: false,
      dataType: "html",
      type: "GET",
      data: {
        'request_type':'ajax', 
        'op':'get_all_stores'
      },
      success: function(result, success) { 
          alert(result);
          $('#scanner').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });
  });

关于bind的一个建议是，如果您使用的是jQuery版本.on()，则可以使用1.7+方法。

在我看来，您希望通过ajax调用生成#scanner元素options，因此更改为：

删除async:false，因为ajax必须是异步的。
将dataType更改为html，因为您似乎正在$('#scanner').html(result);建议从那里返回选项。

Answer 3

我认为这就是你想要的

  $("#scanner").bind('focus',function () {
            Myfunction(); // call what you want to call on focus 
        }).change(function() {
              Myfunction()      // call what you want to call on Change                    
      });



function Myfunction()
{
    var mod_url = "http://google.com"; 

    $.ajax({
      url : mod_url,
      cache: false,
      dataType: "json",
      type: "GET",
      async: false,
      data: {
        'request_type':'ajax', 
        'op':'get_all_stores'
      },
      success: function(result, success) { alert(result);
        $('#scanner').html(result);
      },
      error: function() {
        alert("Error is occured");
      }
    });
}

这里js fiddle DEMO

为什么没有调用AJAX函数并且在调用函数时没有打印警报？

3 个答案: