jQuery를 사용하여 jQuery 추가하기

Question

그래서 분명히 jQuery가 좋아하지 않는 것을하려고합니다.

사진을 업로드하는 데 javascript를 사용하고 있습니다. 사진을 업로드 할 때마다 사진을 볼 수있게하고 작업 제거 스크립트를 첨부하고 싶습니다. 디스플레이가 정상적으로 작동하며, 불그스름을 사용하여 페이지를 검사 할 때 페이지에 존재하지 않기 때문에 제거가되지 않습니다.

이

파일 제거하기위한 스크립트입니다 : 나는 모든 이미지를 유지하는 div 태그를 내 페이지에서

var insertScript = "<"; 
insertScript += "script type='text/javascript'>jQuery(document).ready(function($){ $('#Remove_" + 
    file + "').click(function() { removeImage(\"" + 
    fileName +"\", \""+ imageUID +"\", \"" + 
    file + "\"); }); });"; 
    insertScript += "<"; 
    insertScript += "\/script>"; 

을, 그래서 나는 그것에 이미지와 같은 업로드 될 때마다 추가 오전 :

jQuery(document).ready(function($) { 
    $('#ImageBar').append(insertScript); 
    $('#ImageBar').append(insertHTML); 
}); 

insertHTML 변수에는 이미지가있는 div 태그와 제거 버튼이 있습니다. javascript/jquery가 없습니다. 그것은 잘 덧붙인다. insert 스크립트는 전혀 추가하지 않습니다.

jQuery를 insertScript에서 제거하고 간단한 javascript 경고로 바꾸고 태그가 엉망인 태그인지 테스트 해 봅니다. 추가 할 때 경고가 제대로 작동했습니다. 따라서 jQuery가 jQuery를 추가하는 것을 좋아하지 않는다고 생각하게된다. 이 일을하는 다른 방법이 있습니까?

Answer 1

이미지 태그의 데이터 속성을 사용하여 제거에 필요한 데이터를 저장하는 것이 좋습니다. 그런 다음 가까운 버튼에 클래스를 지정하고 핸들러에 대해 해당 클래스가있는 요소를 필터링하는 문서 수준 핸들러를 사용할 수 있습니다. 단추의 상대적 위치를 사용하여 이미지에 액세스하십시오. 같은 페이지에서 스크립트와

<span class="image-container"> 
<img data-filename="foo.png" data-imageuid="35" data-file="foo" ... /> 
<button class="remove-image">X</button> 
</span> 

: 나는 '평가'행동의 어떤 종류를 피하기 위해 유혹 할 것

<script type="text/javascript"> 
    $(function() { 
     $(document).on('click','.remove-image', function() { 
      var $button = $(this), 
       $img = $button.prev('img'), 
       $container = $button.closest('.image-container'); 
       removeImage($img.data('filename'), $img.data('imageuid'), $img.data('file')); 
       $container.remove(); 
     }); 
    }); 
</script> 

Answer 2

새 jQuery 코드를 추가하지 마십시오. 대신 .on을 사용하여 새로 만든 DOM 요소에 자동으로 적용되는 클릭 이벤트를 추가하십시오.

$('#container_div').on('click', 'img', function() { 
    $this = $(this); // the image that was clicked 
    // extract your fileName, imageUID, and file variables somehow from $this 
    removeImage(fileName, imageUID, file); 
}); 

Answer 3

- 평가는 악이다. 이것은 DOM에 동적으로 작성된 HTML 태그 안에 Javascript를 포함시킴으로써 효과적으로 수행 할 수 있습니다. http://www.jslint.com/lint.html

왜 그냥 ... 이런 종류의 접근법에 따라, 당신이 만드는 엔티티에 직접 바인딩 이벤트 처리기를 사용하지 Event binding on dynamically created elements and passing parameters