fumokmmさんの書かれているdata()を使う方法が良いと思います!
1点だけ
javascript
1$('div#stage').append($i);
とあるので、var $i = $('i')
この部分は元々HTML上にある<i>を取得しているのではなく、新しく作り出していると言うことであれば、var $i = $('<i>')
の書き間違いではないでしょうか?
もし"i"
という文字列でと言うことであれば、
$i
にはdataをつけることができません。そして、$gotI = $('div#stage').find('i');
はそもそも別のものを取得しようとしていることになるので、hello()は実行できないので注意が必要かと思います。
javascript
1ocnsole.log( $i.data('hello') ); // undefined
2ocnsole.log( $i.data() ); // undefined -> dataをつけることができない。
3ocnsole.log( $gotI.data('hello') ); // undefined ※そもそも$iとは別のものを選択しているので...
また、$('<i>')
で新しくタグを作る場合も、元々<div id="stage">の中に<i>があるような場合は注意が必要です。
javascript
1$i = $('<i>').data('hello', function() {
2 console.log("hello from extend-add");
3 });
4 $('div#stage').append($i);
5
6 $gotI = $('div#stage').find('i');
7 $gotI.each(function(i, elm) {
8 var $i = $(elm);
9 console.log($i, $i.data('hello'));
10 // -> [i, context: i] undefined
11 // -> [i, context: i] function anonymous(
12 });
13 $gotI.data('hello')(); // 元々あった i には hello()が無いのでエラーになる
おまけ
$gotI.hello();
がundefinedになってしまう原因は、
メソッドが<i>
に付いているのではなく、$i
というjQueryオブジェクトの方に付いているので、
$i
は$gotI
とは別のjQueryオブジェクトなので、$gotI.hello
にはってプロパティは無いよ!となっているためです。
console.log()でオブジェクトを見比べてみると判ると思います。
// console.log($i);
[prevObject: n.fn.init[1], context: document, selector: "i"]
context: document
hello: function() // hello がある
length: 0
prevObject: n.fn.init[1]
__proto__: n[0]
selector: "i"
// console.log($gotI);
[prevObject: n.fn.init[1], context: document, selector: "div#stage i"]
context: document
length: 0
prevObject: n.fn.init[1]
selector: "div#stage i"
__proto__: n[0]
$(element)[0]、または$(element).get(0)でelementを取ってきてelementにメソッドをつける方法もありますが、あまりオススメはしないので参考程度に。
javascript
1$(function() {
2 var $i = $('<i>');
3 $('div#stage').append($i);
4 $i.get(0).hello = function() {
5 console.log("hello");
6 };
7
8 var $gotI = $('div#stage').find('i');
9 $gotI[0].hello();
10});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/26 19:12