Question

我正在尝试在文本框的glyphicon点击上调用一个函数。但我无法做到。

这是我的代码。

<style>
  /* enable absolute positioning */
.inner-addon {
  position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
 position: absolute;
 padding: 10px;
  /*pointer-events: none;*/
}

/* align glyph */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }


</style>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <form method="GET" class="forms-search" id="forms-search" action="<?php echo Yii::app()->createUrl('store/searcharea')?>">
   <div class="row">
    <div class="border col-sm-11 col-xs-10">
      <div class="inner-addon left-addon">
            <i id='marker' class="glyphicon glyphicon-map-marker" style="color:#0070EB;cursor:pointer;"></i>      
              <?php echo CHtml::textField('s',$kr_search_adrress,array(
              'placeholder'=>$placholder_search,
              'class'=>"form-control",
              'required'=>true
              ))?>  
        </div>
    </div>
    <button type="submit" class="btn" style="background-color:#0070EB;color:white">Find</button>   
</div>
</form>

<script>
$(document).ready(function(){
$('#marker').click(function(event){
event.preventDefault();
alert("hello");
});

</script>

现在，我在我的网页上写了上面的代码。我可以在正确的位置看到标记和文本框，现在，我想在标记点击上调用一个函数（点击事件）。

谁能告诉我这里缺少什么？我做错了什么。

Answer 1

这看起来像是一个语法问题。您在$(document).ready调用中的javascript代码格式不正确，您没有外部就绪函数调用的右括号和括号。将代码更改为：

$(document).ready(function(){
    $('#marker').click(function(event){
        event.preventDefault();
        alert("hello");
    });
});

我建议您正确缩进js代码，以便快速识别这些语法问题。

文本框glyphicon然后一个函数应该调用

1 个答案: