1

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

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

而这个 jQuery

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

我正在寻找 call $('#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 %}

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

4

4 回答 4

2

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

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

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

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

就像一个注释，你的初衷是完全有效的。如果点击事件被绑定到一个元素上，那么你如何选择它并不重要——只要你能得到它，你就可以触发该事件。在这里测试它：http: //jsfiddle.net/yV57x/

于 2013-04-19T17:04:58.050 回答
1

是的，可能。作为

$('#my_button_1')并且 $('.my_button')都指向同一个元素

$('.my_button').click(function() { 
    alert("button was clicked")
});
$('#my_button_1').trigger('click');
于 2013-04-19T16:11:08.120 回答
0

是绑定事件时页面上的内容吗？文档可能已准备就绪，但如果您正在加载动态内容或创建内容并将其动态附加到页面上，则在尝试绑定事件时元素可能不存在。

根据您提供的最少信息，我的猜测是上述情况属实，在这种情况下，您需要创建一个委托事件，如下所示：

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

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

对于 jQuery 1.4.2 - 1.7：
.delegate() 文档

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

对于 jQuery 1.3 - 1.4.2：
.live() 文档

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

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

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

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

希望这可以帮助。

于 2013-04-19T16:25:24.100 回答
-1

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

选择器部分选择元素$('.my_button')。这些元素被分配了一个onclick处理程序：

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

然后$('#my_button_1').trigger('click')应该给你一个警报。

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

于 2013-04-19T16:10:43.190 回答