Question

为什么这不起作用？ --- -------- HTML

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="j.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$.createHello();
});
</script>
</body>
</html>

--- JS --------- j.js -------

(function($){  
 $.fn.createHello= function() {  
    $('body').append('<div id="hello">Hello world</div>');
    $('#hello').click(funciton(){
    alert("Hello you clicker");
    });
 };  
})(jQuery);

任何解决方案，或更好的方法来做同样的事情？

Answer 1

将click更改为delegate，因为您正在动态创建hello元素。以下是更新的代码。功能也拼错了，

<强> Live Demo

 $.createHello = function() {  
    $('body').append('<div id="hello">Hello world</div>');
    $('body').delegate('#hello', 'click', function(){
        alert("Hello you clicker");
    });
 } 

$(document).ready(function(){
    $.createHello();
});

我个人就是这样写的：

<强> Updated Demo

 $.fn.createHello = function() {  
    $(this).append('<div id="hello">Hello world</div>');
    $(this).delegate('#hello', 'click', function(){
        alert("Hello you clicker");
    });
 } 

$(document).ready(function(){
    $('body').createHello();
});

这允许您将其绑定到页面上的任何元素并调用createHello()

我还建议您查看plugin authoring reference以获取一些好的提示。

Answer 2

因为您使用$.fn.myPlugin定义了插件，所以必须为插件选择一个要处理的元素。如果您希望插件以您使用它的方式工作，请使用

进行定义

$.myPlugin = function(){
  // your code here
}

Answer 3

createHello插件会在body元素后附加一些内容。为了附加click事件，您应该选择元素并使用插件代码中的this关键字引用它。试试这样的事情

在测试页中添加此标记

<div id="hello">Click me</div>

JS

 $.fn.createHello= function() {  
    $('body').append('<div id="hello">Hello world</div>');
    this.click(funciton(){
       alert("Hello you clicker");
    });
 };  


$("#hello").createHello();

问题| Jquery插件创建问题

3 个答案: