Firefox는 jquery가 생성 한 요소를 재설정하지 않습니다.

Question

이것은 아마도 중복되었지만 제목 설명에서 어떤 일이 일어나는지 표현하는 방법을 모르겠습니다. 버튼을 클릭하여 삭제하고 다시 만드는 이미지 요소가 있습니다. 기본적으로 이미지에 php로 필터를 적용하고 이전 요소를 삭제하여 새 이미지로 대체하여 새 필터를 표시합니다.

요소 만들 수있는 코드 :

function pictureReset(data) { 
    $(".filteredImg").remove(); 
    var elem = document.createElement("img"); 
    elem.setAttribute("class", "filteredImg"); 
    elem.setAttribute("height", "328"); 
    elem.setAttribute("alt", ""); 
    elem.src = 'contest/filtered_'+tempFilePath; 
    document.getElementById("filteredImgContainer").appendChild(elem); 
} 

필터를 적용하는 코드는 (내가 몇 가지 필터가 있지만 코드는 동일합니다, 그들은 단지 다른 PHP 파일

$('#sepia').click(function() { 
    var filePathName = tempFilePath; 
    $.ajax({ 
     type: 'POST', 
     url: 'php/sepia.php', 
     dataType : 'text', 
     data: { 
      FilePath : filePathName 
     }, 
     success: function (data) { 
      pictureReset(); 
     } 
    }).done(function(response){console.log(response);}); 
}); 

에게 전화

이제는 문제가 이지만 작동합니다. 크롬 버튼을 클릭하면 이전 이미지가 제거되고 새로 필터링 된 이미지로 바뀝니다. 어떻게 든 이전 이미지를 검색합니다 (필터가 적용된 이미지를 검색하면 서버에 없기 때문에 존재하지 않지만). 새 이미지 대신 이전 필터를 표시합니다. 왜 이런 일이 일어나고 있는지에 대한 아이디어가 있습니까 ??

Answer 1

매개 변수 추가 외에도 코드를 개선 할 수 있습니다. 이미 jQuery를 사용하고 있기 때문입니다.

이 코드를 대체 할 수

function pictureReset(data) { 
    $(".filteredImg").remove(); 
    var elem = document.createElement("img"); 
    elem.setAttribute("class", "filteredImg"); 
    elem.setAttribute("height", "328"); 
    elem.setAttribute("alt", ""); 
    elem.src = 'contest/filtered_'+tempFilePath; 
    document.getElementById("filteredImgContainer").appendChild(elem); 
} 

으로 :

function pictureReset(data) { 
    var elem = $('<img class="filteredImg" alt="" style="height:328px;" src="contest/filtered_' + tempFilePath + '?t="' + $.now() + ' />'); 
    $("#filteredImgContainer img.filteredImg").replaceWith(elem); 
} 

가이 코드에 대한 jQuery replaceWith을 사용했다.