【jQuery】追加のDOMを操作したい

Question

appendで追加した要素にcssメソッドを使いたいです。

下記を参考にしましたが、うまくいきません。
参照

自分でも下記のような書き方でやってみましたがうまくいきません。

var cutTimeline = '<div class="cut_timeline" data-episode="' + episode + '"></div>';
$(".timeline").append(cutTimeline);
console.log(cutWidth);
$(".cut_timeline").on('ready',function() {
    $(".cut_timeline:nth-child(" + focusCut + ")").css({
        'width': cutWidth + 'px',
        'left': cutLeft + 'px'
    });
});

Answer 1

追加するDOMをjQueryオブジェクトとして保持してそのオブジェクトのreadyで発火させてみてください。

例

$(function(){
	var cutTimeline = $('<div class="cut_timeline"></div>');
	$(".timeline").append(cutTimeline);
	cutTimeline.ready(function() {
		cutTimeline.css({
	        'background-color': 'red'
	    });
	});
});

Comments

[mri0815]

変数:cutTimeline について、appendする分にはStringで構いませんが、readyのイベントを取りたいので、jQueryオブジェクトとして保持してください。

[NobumitsuHata]

stringなので、$(cutTimeline).ready(function() { のような書き方でもやってみましたが、うまくいきません。

[NobumitsuHata]

readyの中でconsoleしたら表示されたので、
セレクタのnth-childを一旦とったらうまくいきました、
nth-childの代わりに.eqメソッドで要素のインデックス指定したらうまくいきました。

Answer 2

var cutTimeline = '<div class="cut_timeline" data-episode="' + episode + '"></div>';

↓こうでは？

var cutTimeline = $('<div class="cut_timeline" data-episode="' + episode + '"></div>');

Comments

[NobumitsuHata]

readyの中でconsoleしたら表示されたので、
セレクタのnth-childを一旦とったらうまくいきました、
nth-childの代わりに.eqメソッドで要素のインデックス指定したらうまくいきました。

Answer 3

$(".timeline").append(cutTimeline).trigger('create');

Answer 4

$(".cut_timeline").on('ready',funtion(){

のトリガーはいりますか？
あえて書くならこうとか？

  if($(".cut_timeline").length>0) {
    ・・・
  }

Comments

[NobumitsuHata]

DOMを後から追加しているのでセレクタを取得できません。

[yambejp]

ご提示のソースから類推するに
appendした時点でreadyは確定していると思うんですが
on('ready'・・・
のくくりを取ってはいけないんでしょうか？
appendした後に非同期で書き換わるようには見えませんが