如何在文档准备就绪时触发点击事件？

Question

单选按钮

<input name="radio-choice-t-6" class="qololbl" id="radio-choice-t-6a" value="qolo" checked="checked" type="radio">
<label for="radio-choice-t-6a" style="border: 1px solid #2d5f7c;width:90px;border-bottom-left-radius:4px;border-top-left-radius:4px;font-family:Noto Sans;">Toast</label>

$(document).ready(function (e) {

    $('.qololbl').trigger('click'); 

    $(".qololbl").click(function(){
        alert("Hi");
     });
});

如何在文档准备就绪时触发qololbl的点击事件。为什么这段代码不起作用呢..？ 提前感谢。 帮帮我。

- K-Series

---

你在设置 click 事件处理程序之前就触发了 click 事件。 - Scott Marcus

Answer 1

使用.click()代替.trigger()，并将其放在事件处理程序声明后面。

$(document).ready(function (e) {

    $(".qololbl").click(function(){
        alert("Hi");
     });
     
     $('.qololbl').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="radio-choice-t-6" class="qololbl" id="radio-choice-t-6a" value="qolo" checked="checked" type="radio">
<label for="radio-choice-t-6a" style="border: 1px solid #2d5f7c;width:90px;border-bottom-left-radius:4px;border-top-left-radius:4px;font-family:Noto Sans;">Toast</label>

备选方案（由pratik-gaikwad建议）

$(document).ready(function (e) {

    $(".qololbl").on('click', function(){
        alert("Hi");
     });
     
     $('.qololbl').trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="radio-choice-t-6" class="qololbl" id="radio-choice-t-6a" value="qolo" checked="checked" type="radio">
<label for="radio-choice-t-6a" style="border: 1px solid #2d5f7c;width:90px;border-bottom-left-radius:4px;border-top-left-radius:4px;font-family:Noto Sans;">Toast</label>

- Leguest

---

我建议使用on而不是click来注册，然后使用trigger。 - Pratik Gaikwad

Answer 2

代码逐行执行。在为元素应用事件之前，您会触发点击事件。这就是为什么没有事件被触发，也没有弹出警报的原因。

请参考Leguest的答案以获得正确的顺序。

- Marcin Pevik