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)
        });
    });