设置属性与.href和.attr（'href'）和jquery ID选择器

Question

我试图使用javascript和jquery来设置标签的href属性，因为我需要从canvas下载图片。但是，我遇到了一些问题。我找不出原因，所以我在这里发表我的问题。

1. 如果我使用id来设置监听器，监听功能不捕捉事件，下面就像png格式按钮。

2. 比较jpegBtn2和jpegBtn，我使用普通的javacsript来设置前href属性，对于后者，我使用jquery进行操作。两种方法都可以下载图片，但jpegBtn2方法下载的图片无法正确打开。后来我检查了Chrome控制台，发现jpegBtn2的href仍然是“＃”，但是jpegBtn的href被改变了。我不知道这一点。

这里是我的代码：

if(!setDownloadDialogOrNot){ 
    $('div.dialogBtnSet').append('<a class="jpegBtn2" id="jpegBtn2Id" type="button" href="#">close</a>'); 
    $('div.dialogBtnSet').append('<a class="jpegBtn" type="button" href="#">jpeg</a>'); 
    $('div.dialogBtnSet').append('<a id="pngBtn" type="button" href="#">png</a>'); 
    setDownloadDialogOrNot=true; 
}; 

$('.jpegBtn2').on('click',function(){ 
    setDownloadCanvas(1); 
    $('.jpegBtn2').attr('download',filename+'.jpeg'); 
    document.getElementById('jpegBtn2Id').href=document.getElementById('downloadCanvas').toDataURL('image/jpeg')); 
    $('div#downloadDialog').dialog('close'); 
}); 

$('.jpegBtn').on('click',function(){ 
    setDownloadCanvas(1); 
    $('.jpegBtn').attr('download',filename+'.jpeg'); 
    $('.jpegBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/jpeg')); 
    $('div#downloadDialog').dialog('close'); 
}); 

$('#pngBtn').on('click',function(){ 
    setDownloadCanvas(0); 
    $('#pngBtn').attr('download',filename+'.png'); 
    $('#pngBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/png')); 
    $('div#downloadDialog').dialog('close'); 
}); 

`

Answer 1

事件绑定动态地添加你需要使用元素 $(initallyLoadedContainerElement).on('click', 'selector',function(){})

http://api.jquery.com/on/#direct-and-delegated-events

$(document).on('click', '.jpegBtn2',function(){ 
    setDownloadCanvas(1); 
    $('.jpegBtn2').attr('download',filename+'.jpeg'); 
    document.getElementById('jpegBtn2Id').href=document.getElementById('downloadCanvas').toDataURL('image/jpeg')); 
    $('div#downloadDialog').dialog('close'); 
}); 

$(document).on('click', '.jpegBtn',function(){ 
    setDownloadCanvas(1); 
    $('.jpegBtn').attr('download',filename+'.jpeg'); 
    $('.jpegBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/jpeg')); 
    $('div#downloadDialog').dialog('close'); 
}); 

$(document).on('click', '#pngBtn',function(){ 
    setDownloadCanvas(0); 
    $('#pngBtn').attr('download',filename+'.png'); 
    $('#pngBtn').attr('href',document.getElementById('downloadCanvas').toDataURL('image/png')); 
    $('div#downloadDialog').dialog('close'); 
});