0

私はjqueryプラグインを書いています。

イベントを追加したい html が動的に挿入されているため、以下のように「クリック」イベントを記述/追加しても問題ありませんか?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://codeorigin.jquery.com/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">


 /* To be moved to own custom js plugin file ------------------------------------------- */

        (function ($) {
            $(document).ready(function () {



                //add events
                $('body').on('click', '.injectedSpan', function () {
                    //alert($(this).html());
                    $(this).remove();

                });


                //custom plugin
                $.fn.addMySpan = function () {


                    return this.each(function () {

                        $(this).append('<span style="cursor:pointer" class="injectedSpan"> added</span>');

                    });

                };

            });

        }(jQuery));

/* -----------------------------------------------------------------------------------------------------*/



        $(document).ready(function () {

            $('#One,#Two,#Three').addMySpan();




        });



    </script>


</head>
<body>
    <form id="form1" >
        <div>




            <div id="One">test1</div>

            <br />
            <br />
            <br />

            <div id="Two">test2</div>

            <br />
            <br />
            <br />

            <div id="Three">test3</div>


        </div>
    </form>
</body>
</html>
4

1 に答える 1

2

これが私がそれを行う方法です：

$.fn.addMySpan = function () {
    return this.each(function () {
        var $el = $('<span>', {style : 'cursor:pointer', class : 'injectedSpan', text : 'added'})
        $el.click(function(){
            $(this).remove();
        })
        $(this).append($el);
    });
};

フィドル: http://jsfiddle.net/tgZZq/

個人的な好みですが、私はそういう方が好きです。委任されたイベントを避け、要素に直接バインドしてみてください。より明確で、よりクリーンで、より高速です。

于 2013-10-04T17:19:08.547 に答える