點擊和改變處理器同時開火，鉻

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上它的工作原理非常好，當我第一次點擊時我只能看到第一個lo但是在Chrome上，當我點擊按鈕時，這兩個日誌都會立即出現。

我需要在第一次點擊時顯示第一個日誌，但是當您在第二次日誌顯示中進行第二次或多次點擊時。

Answer 1

我需要在第一次點擊時顯示第一個日誌，但是當您在第二次日誌顯示中進行第二次或多次點擊時。

這不是那些功能所做的。當您更改單選按鈕的值（選擇其中一個選項）時將觸發，並且只需單擊任何單選按鈕選項即可觸發click觸發器。

如果要計算單選按鈕上的點擊量，只需使用一個包含點擊量的變量即可。

var clicks = 0; 
$('input:radio[name=phoneSelect]').click(function() { 
    clicks++; 
    if(clicks < 2) { 
     console.log('First function now'); 
    } else{ 
     console.log('Second function now'); 
    } 
}); 

Answer 2

......怎麼

//Register initial click event 
$('input:radio[name=phoneSelect]').one('click', function() { 
    console.log('First function now'); 

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

}); 

Answer 3

請各位看看下面的代碼片段。可能這會幫助你一點。

$('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>