Question

我正在编写一个jquery插件。

可以在下面编写/添加事件'click'，因为我要添加事件的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>

Answer 1

我将如何做到这一点：

$.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/

这是个人偏好，但我更喜欢这样。尝试避免委托事件，直接绑定元素。它更清晰，更清洁，更快。

这是一个向自定义jquery插件添加事件的好方法

1 个答案: