Question

谢谢你花时间看看这个。

我正在尝试编写我的第一个jQuery插件，并遇到了我的第一个问题。该插件就像这样调用

<div id="kneel"></div>
<script type="text/javascript">
$("#kneel").zod(1, { });
</script>

它接受第一个选项（整数），并返回由php动态生成的html内容。生成的内容需要受各种功能的约束（例如禁用表单按钮和单击返回ajax数据的事件。

插件看起来像这样（我已经包含了整个插件以防万一）...

(function( $ ){
  $.fn.zod = function(id, options ) {  

    var settings = {
      'next_button_text': 'Next',
      'submit_button_text': 'Submit'      
    };

        return this.each(function() {        
            if ( options ) { 
              $.extend( settings, options );
        }

        // variables
        var obj = $(this);

      /* these functions contain html elements that are 
      generated by the get() function below */

        // disable some buttons
           $('div.bario').children('.button').attr('disabled', true);

        // once an option is selected, enable the button
           $('input[type="radio"]').live('click', function(e) { 
          $('div.bario').children('.button').attr('disabled', false);
           })
        // when a button is clicked, return some data
           $('.button').bind('click', function(e) { e.preventDefault();
             $.getJSON('/returnSomeData.php, function(data) {
             $('.text').html('<p>Hello: ' + data + '</p>');
           });

    // generate content, this is the content that needs binding...
    $.get('http://example.com/script.php?id='+id, function(data) {
      $(obj).html(data);
    });

  });

  };
})( jQuery );

我遇到的问题是为生成的内容运行而创建的函数不会绑定到生成的内容。如何绑定get()函数创建的内容？

Answer 1

您可能会发现.delegate或.live有用。他们能够将事件绑定到文档中的当前和未来元素，而不是仅仅在调用时找到的文档。

修改

以下是我的意思的一个工作示例：http://www.jsfiddle.net/bradchristie/39Gt5/请注意，我不再对委托函数进行任何调用，但是当您单击按钮并单击时，它会添加新的段落和按钮事件自动绑定。

<强>更新

对于那些发现此帖子并使用jquery 1.8+的人，.delegate / .live已被deprecated替换为.on。链接的参考资料显示了如何将代码转换为使用新的.on()方法的示例。

jQuery：绑定生成的元素

1 个答案: