jquery新增元素on click无效

使用jquery on click时出现的情况，由于下面的 view_qrocode 按钮是通过js新增加的

<td>
    <a class="btn btn-primary view_qrcode"  value="{%=file.url%}">
        <i class="glyphicon glyphicon-qrcode"></i>
           <span>二维码</span>
    </a>
</td>

　　在绑定 on click事件时，点击按钮不起作用

    $(".view_qrcode").on('click',function(){
        var str=$(this).attr('value');
        // //清空二维码
        $("#erWeiMa").empty();
        //生成二维码
        $("#erWeiMa").qrcode({
            render:"table",
            text:utf16to8(str)
        });
    });

　　

后来考虑到这个元素是新增的，所以使用代理方法 delegate()， click事件可以用了。 注意：事件需要绑定到它的父级或者body

    $("body").delegate(".view_qrcode",'click',function(){
        var str=$(this).attr('value');
        // //清空二维码
        $("#erWeiMa").empty();
        //生成二维码
        $("#erWeiMa").qrcode({
            render:"table",
            text:utf16to8(str)
        });
    });

　　

在jQuery 3.0中，.delegate()已被标记为弃用。从jQuery 1.7开始，它已经被.on()方法取代。所以我们不建议使用该方法。但是，对于早期版本，它仍然是使用事件代理（委派）最有效的方式。事件绑定和代理（委派）的更多信息请查看.on()方法。

所以还是用on()方法，仍然要绑定到父级或者 body

 $("body").on('click',".view_qrcode",function(){
        var str=$(this).attr('value');
        // //清空二维码
        $("#erWeiMa").empty();
        //生成二维码
        $("#erWeiMa").qrcode({
            render:"table",
            text:utf16to8(str)
        });
    });