jQueryを使って、ボタンを押すと要素を追加しています。
後から追加された要素はマウスホバーなどが有効にならないのですが、
対象方法などあるでしょうか。
下記のようなソースで質問の状態になります。
よろしくお願いします。
<html>
<head>
<title>test</title>
<script type="text/javascript" src="system/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
jQuery(".edit").hover(
function () {
jQuery(this).css("background","yellow");
},
function () {
jQuery(this).css("background","none");
}
);
jQuery(".insert").click(function () {
var html = "<div class='edit'><p>add-text</p></div>";
jQuery("#sortable .edit:first").before(html);
});
});
// -->
</script>
</head>
<body>
<div><INPUT class="insert" type="button" value=INSERT></DIV>
<div id="sortable" style="width:200px;">
<div class="edit">
<p>text1</p>
</div>
<div class="edit">
<p>text2</p>
</div>
<div class="edit">
<p>text3</p>
</div>
</div><!-- id="sortable" -->
</body>
</html>
No.2ベストアンサー
- 回答日時:
後から追加した要素にhoverイベントがアタッチされていないからです。
イベントつきの要素をcloneして追加する手があります。
こうします。
jQuery(".insert").click(function () {
var html= jQuery("#sortable .edit:first").clone(true);
jQuery(html).children("p").text("add-text");
jQuery("#sortable .edit:first").before(html);
});
もう一つの方法、
hoverを止めてくmouseover/mouseoutのイベントハンドラーを
作りなおして、予めlive(type, fn)で登録しておきます。
そうすれば、後から追加した要素にもイベントハンドラー
が有効になるはずです。(※この方法は、イベントバブリングとプロパゲーションに注意 する必要がありそうです。)
回答ありがとうございます。
cloneを利用することで旨くいきました。
アタッチという言葉も知らない状態でした。
大変勉強になりました。
ありがとうございます。
No.3
- 回答日時:
jQuery(document).ready(init);
function init( ) {
jQuery('#sortable').hover(hover,out);
}
function hover( evt ) {
if( evt.target.tagName=='A' )
evt.target.style.backgroundColor = 'Yellow';
}
function out( evt ) {
if( evt.target.tagName=='A' )
evt.target.style.backgroundColor = 'none';
}
# ほんのつい最近対策方法ここで言わなかったけ?俺の気のせい?
同様な質問がありましたでしょうか。気がつきませんでした。
googleで1日中検索しても解決策を見いだすことができませんでした。
回答ありがとうございます。
ソースを参考にさせて頂きます。
No.1
- 回答日時:
editクラスへのホバー設定を最初にまとめて行っていますので、後から追加した要素には設定されていないので、当然ながらホバーの動作は起こりません。
ご希望の動作をしないのは、それが原因と推測されます。
>対象方法などあるでしょうか。
う~~ん。 対象方法はわかりませんが、対処方法なら…
そのままのロジックを前提とすれば、追加要素を生成したときに同じようにホバーのアクションを設定しておいてあげれば宜しいかと。
いちいち設定しないでやるのなら、全体のCSSで.edit:hoverを設定しておけば、クラス設定だけでも有効になるはず。
とはいうものの、IEだと<a>要素以外には:hoverってきかないんだっけ?(そんな記憶が…)
対処方法ですね。入力間違えました。m(_ _)m
表示の変化だけですとCSSでOKなのですが、この後、クリックした利などの制御を加えようと思っています。
質問では一番シンプルな状態で書きました。
ご提案ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでloadした部分に.jsが効...
-
インラインフレームを自動更新...
-
XHTMLで外部JSファイルを読み込...
-
jQuery toggle() 戻るで開いた...
-
jQueryで追加した要素がマウス...
-
フレーム内の要素へのXPATHはど...
-
JavascriptからPHPへのAjax通信...
-
同一ページ移動時ハンバーガー...
-
要素内を常に一番下を表示させたい
-
Googleマップに複数のピンを立...
-
変数の内容を別functionに渡したい
-
【再質問】計算(入数*単価)...
-
Selenium4でボタンをクリックで...
-
パソコンで動くjavascriptがス...
-
階層別の組織図の自動作成について
-
jQueryのblockUIをformのボタン...
-
jquery.csv2table.jsに検索窓
-
jQueryを使いformでsubmitした...
-
<input>のvalue値をプルダウン...
-
Selenium Basicの件
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
インラインフレームを自動更新...
-
jQuery toggle() 戻るで開いた...
-
jQueryで追加した要素がマウス...
-
AjaxでSJISファイル読み込みす...
-
$.postとPerlのデータ受け渡し...
-
jQueryでloadした部分に.jsが効...
-
Folder.selectDialog()について
-
リンク元のURLのパラメータでペ...
-
div要素の入れ替え。半透明イメ...
-
一定時間ごとに表示内容を切り...
-
毎日午前0時にhtmlを切り替えた...
-
Safariでの onload="getData()"...
-
jQuery loadで要素差し替え
-
phpからget送信で持ってきたデ...
-
Fire Foxで作動しないscriptが...
-
location.replaceでの移動
-
XMLHttpRequest()で、読み込む...
-
日付が変わると自動更新
-
jQueryのloadメソッドが時々反...
-
slideToggleを複数のボタンで適...
おすすめ情報