如何在选择元素上触发点击事件？ （没变）

Question

在下面的代码中，当我更改选择时，将出现一个alert。我正在尝试使功能类似于单击option时，它将显示一个alert。

$(document).ready(function() {
  $("#x").change(function() {
    alert("Haha");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>

在下面的代码中，当我单击已经选择的选项时，没有任何效果。例如，选择a，然后单击a无效。

$(document).ready(function() {
  $("#x").on("option", "click", function() {
    alert("Haha");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>

因为我想在重新单击所选选项时触发事件。

单击选择框->下拉菜单->单击选定的选项->触发事件

有人可以帮助我吗？

Answer 1

您是否尝试过与选择绑定，例如：

$('#x').bind('click', function(){
    console.log('Clicked') 
 });

如果这不起作用，请告诉。谢谢 希望这会有所帮助。

Answer 2

您需要在单击下拉菜单时执行代码吗？

如果是，这是您的代码

https://jsfiddle.net/shoesheill/gjLyxo5d/6/

如果没有，请与您的要求一起发表评论。

$(document).ready(function() {
  $("#x").off().on('click',function() {
    alert("Haha");
  });
});

Answer 3

  

“单击选择框->下拉菜单->单击所选选项->触发事件”

首先不要使用alert()，它会提示您确实不需要浪费时间的额外点击。使用console.log()。

以下演示：

• 将click事件委托给select#x：

  

$（'＃x'）.on（'click'，...

• 单击一次，每点击一次^✱ ，就会触发 focus事件：

  

^✱ 如果（cnt％2 === 0）{$（this）.trigger（'focus'）;}

• select#x也被委派给focus事件，并将调用optionTrigger()：

  

$（'＃x'）。on（'focus'，optionTrigger）;

• function optionTrigger()将记录选定的<option>索引和文本：

  

^✱ 如果（cnt <2）{ ...

     

... $(this)。trigger（'blur'）; }

     

var idx = $（this）[0] .selectedIndex;

     

var txt = $（this）.find（'option'）.eq（idx）.text();

---

演示

var cnt = 1;

$("#x").on("click", function(e) {
  if (cnt % 2 === 0) {
    $(this).trigger('focus');
  }
  cnt++;
});

$('#x').on('focus', optionTrigger);

function optionTrigger(e) {
  if (cnt < 2) {
    $(this).trigger('blur');
  } else {
    var idx = $(this)[0].selectedIndex;
    var txt = $(this).find('option').eq(idx).text();
    console.log(idx + ': ' + txt);
  }
}

<select id="x">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>