Question

当id选择器调用jQuery的触发器函数时，是否可以触发由同一元素的类选择器定义的该元素的事件处理程序？例如，假设我有这个HTML：

<div class="my_button" id="my_button_1"></div>

这个jQuery

$('.my_button').click(function() { 
    alert("button was clicked")
});

我正在调用$('#my_button_1').trigger('click') ...并让它以最干净的方式触发上述jQuery。任何帮助表示赞赏。

编辑：根据以下评论，这显然不是jQuery的问题。这是使用的实际代码。

{% block javascripts %}
    {{ include('MyMainBundle:Event:wizard.js.twig') }}
{% endblock %}

在wizard.js中定义的处理程序：

    $('.event_type_option').click(function() {

        alert('option clicked');
        Event.eventTypeId = $(this).attr('id').substring(11);
        customComboSelect(this, $('#event_type_text'));
    });

    $('.people_range_option').click(function() {

        alert('range clicked');
        Event.peopleRangeId = $(this).attr('id').substring(13);
        customComboSelect(this, $('#people_range_text'));
    });

尝试在下面触发事件：

{% if event is defined %}
    <script>
        $(document).ready(function() {

            $('#event_type_{{ event.eventType.id }}').trigger('click');
            $('#people_range_{{ event.peopleRange.id }}').trigger('click');
        });
    </script>
{% endif %}

此外，如果我尝试按照处理程序定义直接触发事件，则会成功触发事件。

Answer 1

是的，可能。如

$('#my_button_1')和$('.my_button')都指向相同的元素

$('.my_button').click(function() { 
    alert("button was clicked")
});
$('#my_button_1').trigger('click');

Answer 2

jQuery中的事件绑定是作为“先进先出”队列完成的（对于委托事件和命名空间事件，它有点复杂，但现在这不太重要了。）

意思是，当事件绑定到一个元素时，它们稍后会在触发事件时以相同的顺序执行。

在您的情况下，您需要绑定click事件处理程序，然后尝试.trigger()它。由于事件绑定和触发在不同的$(document).ready处理程序中，绑定事件的处理程序需要在触发事件的处理程序之前执行。

以下是尝试在绑定之前触发时会发生什么的示例：http://jsfiddle.net/yV57x/1/ - 注意没有alert发生（除非您实际单击HTML中的元素）。翻转$(document).ready处理程序绑定可以解决问题。

就像一张纸条，你原来的意图完全有效。如果click事件绑定到一个元素，那么你选择它的方式并不重要 - 你可以触发事件，只要你能得到它。在此测试：http://jsfiddle.net/yV57x/

Answer 3

绑定事件时页面上的内容是？该文档可能已准备就绪，但如果您正在加载动态内容或创建内容并在页面上即时附加内容，则在尝试绑定事件时可能不会显示这些元素。

我的猜测，基于您提供的最少信息，上述情况属实，在这种情况下您需要创建如下的委托事件：

对于jQuery 1.7或更高版本：
.on() Documentation

$(document).on('click', '.my_button', function () {
    alert("Button was clicked!");
});

对于jQuery 1.4.2 - 1.7：
.delegate() Documentation

$(document).delegate('.my_button', 'click', function () {
    alert("Button was clicked!");
});

对于jQuery 1.3 - 1.4.2：
.live() Documentation

$('.my_button').live('click', function () {
    alert("Button was clicked!");
});

这些方法使用事件委派。在设置这些处理程序时，元素甚至不必在页面上。随着内容的动态加载，jQuery将自动为您附加事件处理程序。

此外应该注意的是，如果从DOM中删除了具有处理程序的内容，则应使用.remove()或.empty() jQuery命令来防止内存泄漏，因为这些命令首先删除所有绑定事件然后是元素。

修改的
我为每个调用添加了所有相应文档的参考链接。最后一次调用也应该是.live()而不是.on()。这是一个复制和粘贴错误，但现在已修复。

希望这有帮助。

Answer 4

是的，这就是它的工作原理。

选择器部件选择元素$('.my_button')。这些元素被赋予onclick处理程序：

.click(function() { 
    alert("button was clicked")
)};

然后$('#my_button_1').trigger('click')会给你提醒。

以编程方式调用事件处理程序的“最干净”方法是（在我看来）不使用trigger。 DOM是视图，将其视为视图。如果您要在控制器中执行操作，请将它们保存在控制器中。

元素上的jQuery触发器事件，其中id包含在包含的twig模板中由类定义的处理程序

4 个答案: