イベント後にfunctionを実行したい

Question

###前提・実現したいこと
ASP.NETでid="main_contents"直下のdivのスタイルdisplayが変化した後に、
あるfunctionを実行させたいと考えています。

###発生している問題・エラーメッセージ
selectorがおかしいのか、イベントタイプが違うのか、希望通りのタイミングでfunctionが働いてくれません。

###ソースコード

$("#main_contents").find("div:eq(0)").css("display").on("change", (function () {
//なんらかのファンクション
}

Comments

[tkturbo]

style.displayをどうやってchangeさせてるのか気になります

Answer 1

$("#main_contents").find("div:eq(0)").css("display") で返ってくるのは文字列なので、cssメソッドのあとにonメソッドをつなげても find で取得した要素の display が変わったことを検出はできないです

属性の変更を監視するなら MutationObserver を使うのはどうでしょうか

var elem = $("#main_contents").find("div:eq(0)").get(0)
var pre_display = $(elem).css("display")
var mo = new MutationObserver(function(mutations){
    var display = $(mutations[0].target).css("display")
    if(pre_display !== display){
        pre_display = display
        // なにかする
    }
})
mo.observe(elem, {
    attributes: true,
    attributeOldValue: true,
    attributeFilter: ['style']
})

style属性の変更があると関数が実行されるので、前のdisplayと変わっていた時にだけ何かするという処理です

Answer 2

Css - jQuery 日本語リファレンス

最初の要素が持つstyle属性の値を返します。

なので、

.css("display").on("change"

この時点でエラーになってませんか？
(stringに「on」という属性はない。)

実現案として、setIntervalして値が変わるのを検知する、なんてのを思いつきますが。

var somefunc = function(){
    var node = $("#main_contents").find("div:eq(0)");
    var styleDisplay = node.css("display");
    return function(){
        if(node.css("display") != styleDisplay){
            // 処理
        }
        styleDisplay = node.css("display");
    }
}();
window.setInterval(somefunc, 100);

とか？

Answer 3

とりあえずエラーがあったので微修正したコードを記載。

$("#main_contents").find("div:eq(0)").css("display").on("change", function () {
		//なんらかのファンクション
})