JSON, AJAX 및 JQuery를 사용한 동적 이미지로드 및 이벤트 바인딩

동적으로 이미지를 내 웹 사이트에 추가하고 싶습니다. 사용자가 버튼을 클릭하면 jquery를 통해 ajax 호출이 서버로 보내지고 이미지 URL과 ID를 포함하는 json 파일이 반환됩니다. 내 웹 페이지에서 이러한 이미지를 렌더링 한 다음 스타일을 변경하고 (일부 조건에 따라 표시) 이미지에 클릭 이벤트 (이벤트를 발생시키는 이미지의 ID를 캡처하는 단일 이벤트 핸들러)를 추가하려고합니다. 도와주세요.JSON, AJAX 및 JQuery를 사용한 동적 이미지로드 및 이벤트 바인딩

출처

2012-07-24 Abhay Kumar

너 자신에게이 일을 전혀 시도하지 않았습니까, 아니면 당신을 위해 일하는 사람을 찾고 있습니까? – sgress454

@ScottGress, 이미지를 정적으로 추가 한 경우에도 $ ("# item")을 사용하여 스타일을 변경할 수 있었지만 이미지를 동적으로 추가 한 스타일은 변경되지 않았습니다. CSS ("style", "value") . –

다음과 같이 이미지 요소를 만들 수 있습니다.

var img=document.createElement("img"); 
img.onclick=function() { /* js code here*/ }; 
img.src="http://example.com/example.jpg"; 
img.style.display="block"; 
/* or give css class, image.className="picture" */

는 다음 :) 수행 <div id="imagecontainer">

document.getElementById("imagecontainer").appendChild(img);

추신 예를 들면 곳 사업부라는 이름의 "imagecontainer"에서의 추가 아약스 코드 없니? 이 URL은 도움이 될 것입니다. 샘플 코드에이 코드를 추가 한 다음 완료하십시오. 그런 http://api.jquery.com/jQuery.getJSON/

출처

2012-07-24 23:10:12

감사합니다. 완벽하게 작동했습니다. 이벤트 처리기 함수에서 다른 함수를 호출 할 수 있습니까 (예 : ). img.onclick = function() {another_func (id_of_clickd_element); }; 나는 이것을 시도했지만 작동하지 않았다. –

일반적으로 오류는 무엇입니까? 또는 당신도 비슷한 것을 할 수있다 function another_func() {/ * this.id * /}; img.onclick = another_func; –

고맙습니다 부락, 그 .. –

뭔가 :

HTML

<img id="15623" src="img/default.jpg" />

jQuery를

$('img').click(function() { 
    var context = $(this); 
    $.getJSON('/getImage.php?id=' + $(this).attr('id'), function (json) { 
     context.attr('src', json.url); 
    }); 
});

PHP

//db connection 

$id = $_GET['id']; 

if (is_numeric($id)) { 
    $query = mysql_query('SELECT url FROM img WHERE id = '.$id); 
    $res = mysql_result($query, 0); 
    return '{"url": "'.$res.'"}'; 
}

출처

2012-07-24 23:17:17

JSON, AJAX 및 JQuery를 사용한 동적 이미지로드 및 이벤트 바인딩

답변

관련 문제