Question

我遇到了问题，因为我想在我的JQuery插件中运行一个on-click函数。在代码片段中，您可以看到插件运行，因为我尝试单击按钮并且没有任何反应，所以我要求以不同的方式在我的插件上包含此点击事件功能以使其运行。提前谢谢你，对不起我的英语。

(function ( $ ) {
 
    $.fn.myPlugin = function( options ) {
 
        // Options
        var settings = $.extend({
            btnText: "Click me!",
            text: "text text text text text",
        }, options );
        
        // Html
        var html = "<div class='container'><p>"+settings.text+".</p><a alt='"+settings.btnText+"' class='btn'>"+settings.btnText+"</a></div>";
        
        // Open functions
        return $("body").append(html);
        
        // Close functions
        $(".btn").click(close);
        
        function close() {
             $(".container").remove();
        };
        
    };
    
}(jQuery));

// Start plugin
$(document).ready(function(){
    $(document).myPlugin({
        // Options
    });
});

/* demo css */
a {
  cursor:pointer;
  }

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

</body>
</html>

Answer 1

单击侦听器永远不会添加到.btn中，因为该代码永远不会执行。这是因为你有一个回报：

return $("body").append(html);

所以代码就在那里停了下来。它应该只是

$("body").append(html);

内置点击功能的JQuery插件

1 个答案: