MooTools事件委托：如何在回调中引用子元素？

发布于 2024-12-22 02:10:03 字数 621 浏览 4 评论 0原文

有这段 HTML:

<div id="modal">
    <select class="country">
        <option value=""></option>
        <option value="opt">Opt</option>
    </select>
</div>

和这段 JS:

$('modal').addEvent('change:relay(.country)', function(){
    console.log(this); // "this" refers to #modal.
}).fireEvent('change:relay(.country)');

日志显示 this 关键字引用了 #modal 元素。我想为每个 .country 选择触发事件，并在回调中引用每个国家。我怎样才能拥有它？这是小提琴： http://jsfiddle.net/EWUCG/5/

原文

Having this piece of HTML:

<div id="modal">
    <select class="country">
        <option value=""></option>
        <option value="opt">Opt</option>
    </select>
</div>

And this piece of JS:

$('modal').addEvent('change:relay(.country)', function(){
    console.log(this); // "this" refers to #modal.
}).fireEvent('change:relay(.country)');

Log reveals that the this keyword refers to the #modal element. I want to fire the event for each .country select and have the reference to each one inside the callback. How can I have it?
This is the fiddle: http://jsfiddle.net/EWUCG/5/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮凉 2024-12-29 02:10:03

来自 IRC 频道上的聊天：

事件委托基于事件冒泡。
因此父级内的元素将触发事件。然后它将触发其父节点中的事件...它会
一直这样做，直到不再有父节点（窗口）
所以您实际上只是将回调设置为当父节点之一接收到从它的父节点传递的事件时发生孩子。

我剩下的唯一解决方案是“eaching”：

$('modal').addEvent('change:relay(.country)', function(event, target){
    console.log(this, event, target); // Then "this" refers to each .country select.
});
$('.country').each(function(el){
    $('modal').fireEvent('change', [null, el]);
});

小提琴： http://jsfiddle.net/EWUCG/12/< /a>

From chatting on the IRC channel:

Event delegation is based off of event bubbling.
So the element inside a parent will trigger an event. It will then trigger the events in it's parent node...
it does that all the way till there's no more parents (window)
So you're really just setting the callback to happen when one of the parents receives the event passed up from it's child.

The only solution I have left is "eaching":

$('modal').addEvent('change:relay(.country)', function(event, target){
    console.log(this, event, target); // Then "this" refers to each .country select.
});
$('.country').each(function(el){
    $('modal').fireEvent('change', [null, el]);
});

Fiddle: http://jsfiddle.net/EWUCG/12/

回复收藏 0 原文

香橙ぽ 2024-12-29 02:10:03

$('.country').addEvent('change', function(){

    console.log(this);
    // "this" refers to select

    console.log(this.getElement(':selected'));
    // this.getElement(':selected') refers to selected option

}).fireEvent('change');

$('.country').addEvent('change', function(){

    console.log(this);
    // "this" refers to select

    console.log(this.getElement(':selected'));
    // this.getElement(':selected') refers to selected option

}).fireEvent('change');

回复收藏 0 原文