button.click() jQuery 问题

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

First : jquery on 是live listener 不需要包在里面 DOM ready:

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

其次： Ajax请求不能指向外域（貌似安装扩展可以解决）

第三： 点击监听器在 span 而不是按钮上。

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

第五种：防止表单按下按钮提交或完全移除表单标签

最后确保您的页面中没有多个 #block1 ID，以便选择器仅在第一次出现时起作用。

button.click() jQuery 问题

button.click() issue with jQuery

jquery

angular-ui-bootstrap