Question

我正在研究一个项目，我刚刚创建了一个表单，我也使用Bootstrap网格来构建设计，代码如下：

<div class="container well" id="block1">
<h4 style="text-align:center">Stock Market Search</h4>
  <form>
      <div class="form-group row">
          <label  for="stock" class="col-sm-3">Enter Stock Ticker Symbol:*</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="stock" placeholder="e.g. AAPL" name="stockName"> 
          </div>
          <div class="col-sm-3">
              <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span> Get Quote</button>
              <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Clear</button>
          </div>
      </div> 
 </form>
 </div>

但是当我试图从www.google.com获取数据时，button.click（）就没有用了。我的jQuery代码如下：

$(document).ready(function () {
    $(document).on("click", "#block1 .glyphicon-search", function(){
 $.ajax({
     url: 'http://www.google.com',
     success: function(data){
         alert(data);
     }
 })
    })
});

可能出现什么问题？我想iQuery和Bootstrap冲突有问题。但有人可以帮忙吗？（P.S.跨域问题通过在Chrome上安装扩展程序来解决，因此这不是问题。）

Answer 1

首先：jquery on是一个实时监听器，无需将其包装在DOM准备就绪中：

 $(document).on("click", "#block1 .glyphicon-search", function(){
 $.ajax({
     url: 'http://www.google.com',
     success: function(data){
         alert(data);
     }
 })
})

第二： Ajax请求无法指向外部域（似乎可以通过安装扩展程序解决）。

第三：点击监听器位于跨度而不是按钮上。

第四：跨度为空（可能是错误的）所以宽度为零（不可点击）！

第五：按下按钮或完全删除表单标记，阻止表单提交。

最后确保您的页面中没有多个#block1 ID，因此选择器仅适用于第一次出现。

button.click（）问题与jQuery

1 个答案: