javascript - 单击并更改处理程序在 Chrome 上同时触发

Question

对于附加到按钮的同一 ID，我有两个函数:

第一个功能:

$('input:radio[name=phoneSelect]').click(function() {
    console.log('First function now');
});

第二个功能:

$('input:radio[name=phoneSelect]').change(function() {
    console.log('Second function now');                        
});

在 safari 上，它工作得很好，当我第一次点击时，我只能看到第一个日志，但是在 Chrome 上，当我点击按钮时，两个日志都会立即出现。

我需要在第一次点击时显示第一个日志，但当您进行第二次或多次点击时，会显示第二个日志。

Answer 1

请看下面的代码片段。也许这会对您有所帮助。

$('div.selectButtons span').click(function() {
    if($(this).data("alreadyClicked") == null)
    {
      alert("First function now");
      $(this).data("alreadyClicked", "true")
    }
    else
    {
      alert("Second function now");
    }  
  
});

input[type="radio"]{
  display:none;
  }
span{
  width:30px;
  height:20px;
  border: solid 1px blue;
  
  }

.selectButtons{
  margin-bottom: 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="selectButtons">
  <input type="radio" name="phoneSelect" ></input>
  <span>Select</span>
</div>  
<div class="selectButtons">
  <input type="radio" name="phoneSelect" ></input>
  <span>Select</span>
</div> 
<div class="selectButtons">
  <input type="radio" name="phoneSelect" ></input>
  <span>Select</span>
</div>