jQueryメソッドにトリガーを仕込む

domに追加される前に要素のフォントサイズを取得しようとしてもIEではできない。
それなら要素に追加されたタイミングで取得すれば良いんじゃないかな、と。

appendにトリガーを仕込む。

var foo = $("<p>").addClass("foo");

var wrap = $("#foo-wrap")
    .bind("appended", function(e, args){
        args.text(args.css("font-size"));
    });

var _append = wrap.append;

wrap.append = function(){
    alert(arguments[0].css("font-size"));//IE -> undefined
    _append.apply(this, arguments);
    this.trigger("appended", arguments);
}

wrap.append(foo);

foo要素自身のフォントサイズが表示される。

本当ならfoo要素に何らかの処理を施すことで実現することが最善な方法と思われるが、それが可能なら苦労はしないのだよ。(-。-)y-゜゜゜


汎用的だが、現実的じゃない方法も一つ。

var _append = jQuery.fn.append;

jQuery.fn.append = function(){
    _append.apply(this, arguments);

    $(arguments).each(function(){
        if($(this).is(".foo")){
            $(document).trigger("foo-appended", this);
        }
    });
}

$(document).bind("foo-appended",function(e, foo){
    $(foo).css("color","#f00");
});


var a = $("<p>");
    b = a.clone().addClass("foo");

a.text("another");
b.text("foo")

$(document.body).append(a,b);

fooクラスの属性を持つ要素の文字色を赤色にしている。

ムチャするわ~ (^_^;)