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 回答