30045


jquery.balloon.jsを使用し，動的にshowBalloonとhideBalloonを設定したいと思っています．  
showBalloonでは，以下のようにバルーン内に閉じるボタンを設定し，それをクリックすることでhideBalloonを呼び出すよう定義しています．

[code]

    function f1(j_obj, text) { // j_objはjqueryオブジェクト
        var id = j_obj.attr('id');
        var btn = '<input type="button" value="閉じる" onclick="f2(' + id + ')"/>';
        j_obj.showBalloon({
            html : true,
            contents : '<div>' + text + btn + '</div>'
        });
    }
    
    function f2(obj) {
        $(obj).hideBalloon();
    };
    
[/code]

しかし，showBalloonは正常に動作しますが，hideBolloonが上手く動作せず，閉じるボタンを押してもバルーンが消えません．  
jquery.balloon.jsは，作成したバルーン情報を.data('balloon')に格納しているようですが，  
どうやらf1()内で格納されたdata属性がf2()内では消えてしまっているようです．  
（f1内ではj_obj.data() = {'balloon'}となっていますが，f2内では$(obj).data() =
{}となってしまいます．f1のj_objとf2の$(obj)が同一であることは確認しています．)

なぜf2ではdata属性が取得できないのでしょうか．data属性にスコープは無いと思うのですが……．また，閉じるボタンを押した際にhideBalloonするにはどうすればよいでしょうか．

よろしくお願いいたします．


CC BY-SA 3.0
2016-11-02T05:54:24.470
30043
2016-11-02T08:31:53.273
19405
question
javascript jquery
jquery.balloon.jsにて動的に指定したオブジェクトのバルーンをhideBalloonしたい


IDが`div1`の時に出力された要素を確認すると以下のようになっていました。

[code]

    <input type="button" value="閉じる" onclick="f2(div1)"/>
    
[/code]

`div1`の部分は文字列で渡さなくてはならないでいかのように書く必要があります。

[code]

    var btn = '<input type="button" value="閉じる" onclick="f2(\'' + id + '\')"/>';
    
[/code]

出力

[code]

    <input type="button" value="閉じる" onclick="f2('div1')"/>
    
[/code]

また、f2内では`$(obj)`と使用していますが、ここはIDを指定するセレクタを書く必要があるので`$("#" + obj)`のようにします。


CC BY-SA 3.0
2016-11-02T06:29:55.923
30045
2016-11-02T07:22:41.763
2016-11-02T07:22:41.763
18862
18862
30043
answer


閉じるボタンのタグにonclick属性を書くより、jQueryでハンドラを追加するほうが楽に出来ます。

[code]

    $(function() {
        $("#baloon").click(function() {
            f1($(this), "hoge");
        });
    });
    function f1(j_obj, text) { // j_objはjqueryオブジェクト
        var btn = '<input type="button" class="close" value="閉じる"/>';
        j_obj.showBalloon({
            html : true,
            contents : '<div>' + text + btn + '</div>'
        });
        j_obj.data().balloon.on("click", ".close", function() {
         j_obj.hideBalloon();
            console.log(j_obj.data());
        });
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://file.urin.take-uma.net/jquery.balloon.js"></script>
    <br><br><br>
    <button id="baloon">test</div>
[/code]


CC BY-SA 3.0
2016-11-02T08:31:53.273
30058
2016-11-02T08:31:53.273
18862
30043
answer