这样啊，我写了一个demo

    var proHtml='';
    for(var i=0;i<3;i++){
        proHtml+='<p class="p2"><span>'+i+'</span></p>';
    }
    $('body').append(proHtml)
    $(proHtml).on('click','.p2',function(){
        alert($(this).text())
    });
    $('body').append('<p>=============</p>')
    $('body').append(proHtml);
    $('body').append('<p>=============</p>')
    $('body').append($(proHtml));
            
    $('body').append('<p>=============</p>')
    $('body').append(domOfxx());
    function domOfxx(){
        var proHtml='';
        for(var i=0;i<3;i++){
            proHtml+='<p class="p2"><span>'+i+'</span></p>';
        }
        return $(proHtml).on('click',function(){
            alert($(this).text())
        }).css('color','red')
    }

• 首先你要知道，proHtml是什么。根据你的写法：

     proHtml='<p class='p2'>..</p><p class='p2'>...</p>'

• 那么，把它当成在页面上的html，这些p放在jq里面是什么样子呢？答案就是p，即$(proHtml)==$('.p2')。那么再按照你的写法得$('.p2').on('click','.p2',fn)，
  p里面可没有子元素类名为.p2的哦。

• 其次，你append里面的$(proHtml)跟你后面$(proHtml).on('click')是两个东西。因为$是一个函数，你相当与调用了两次，两次的返回值不是同一个的哦

=============2016年9月7日18:02:42补充==========

• 楼下已经有人回答了，jq事件绑定的写法是这样：$(他爹).on('click','他儿子',fn)，而你proHtml里面都是p，这些p的关系都是兄弟关系而不是父子关系，懂吗？兄弟关系在jq里面就跟$(p)一样，所以你写的就变成了$(他爹).on('click','他爹',fn)，你想想，在他爹的儿子里面喊他爹的名字，会有人响应你么。所以对于兄弟关系的要这样绑事件：$(proHtml).on('click',fn)，就是不需要找了，我知道proHtml里面个个都是爹，都是我要找的对象。

• 第二个错误，就是append的。你这样写是错误的，要么参考我上面的写法，要么这样写：

  $('.proxx').append($(proHtml).on('click',fn))
  /*或者*/
  var $proHtml=$(proHtml);
  $proHtml.on('click',fn);
  $('.proxx').append($proHtml)
  /*上面是正确写法*/
  /*-----------------------*/
  /*下面是错误例子*/
  var a=$(proHtml);
  var b=$(proHtml);
  b.on('click',fn)
   $('.proxx').append(a);
  /*a的内容跟b是一样的，但a不是b*/
  /*就像孙猴子一样，真假美猴王看起来都是孙悟空的样子，但一个是孙悟空，另一个是六耳泥猴*/

  所以你的代码里面出现了真假美猴王。然后你给其中一只猴子绑定了一个事件，然后把另一只猴子放进了页面里。然后你点击页面里面的猴子希望能触发事件，然而那只猴子表示：“干嘛，老子身上又没有事件”

需要事件绑定。
$("父元素").on("click", "你点击的元素",callfn);

就可以实现你要的了