동적으로 생성 된 요소에 자바 스크립트를 연결하는 방법은 무엇입니까?

Question

자바 스크립트 회전 기능 설정이 있습니다. 그것은 div 요소와 함께 버튼에 의해 동적으로 생성됩니다. 동적으로 생성 된 각 요소에 대해이 회전 슬라이더를 얼마나 정확하게 추가했는지 파악하는 데 어려움을 겪고 있으므로 모든 요소에 영향을 미치지 않고 처음 생성 된 요소에 대해서만 작업하는 대신 개별적으로 작동 할 수 있습니다. 예에서 볼 수 있듯이 :

http://jsfiddle.net/fqjvd7sa/24/

회전 기능

$(function() { 
    $('.s1').slider({ 
     range: 'min', 
     min: -13, 
     max: 13, 
     slide: refreshRotate 
    }); 

    function refreshRotate() { 
     var rotate = $('.s1').slider('value'), 
      x = $('.x'); 
      x.html(rotate); 
     $('.list').css('-webkit-transform', 'rotate(' + rotate + 'deg)'); 
     $('.list').css('-moz-transform', 'rotate(' + rotate + 'deg)'); 
     $('.list').css('-ms-transform', 'rotate(' + rotate + 'deg)'); 
     $('.list').css('-o-transform', 'rotate(' + rotate + 'deg)'); 
     $('.list').css('transform', 'rotate(' + rotate + 'deg)'); 
    } 
}); 

는 당신이 첫 번째 이미지를 한 번만 슬라이더를 구성처럼 보이는 동적

var dom = { 

     // Build the main button 
     buildButton: function(){ 

      // Create new DOM element - div 
      var button = document.createElement('div'); 

      // Set element attribute 
      button.setAttribute('id', 'strip'); 
      button.setAttribute('class', 'newclass');    

      // Style the element 
      button.style.width = "500px"; 
      button.style.height = "400px"; 
      button.style.margin="0px 10px 0px 30px"; 
      // Add content - FileAPI 
      button.innerHTML = '<div class="s1"></div><div class="list"></div>'; 

      // Print element 
      document.body.appendChild(button); 
     } 
    }; 

document.getElementById("first-div").onclick = dom.buildButton; 

Answer 1

생성합니다. 각 이미지에 대해 독립적 인 회전 슬라이더를 사용하려면 buildButton 함수에서 단일 이미지에 대해 로컬로 구성하십시오. 여기서 jquery를 통해 새로운 요소를 쉽게 만들고 필요한 일대일 바인딩을 만들 수 있습니다.

Answer 2

.each()를 사용하면 한 번만 작업하는 대신 각 .list에서 // 기울임 슬라이더가 작동해야합니다. # ID를 사용하지 않지만 슬라이더 스크립트가 제대로 반복됩니다.

var dom = { 

     // Build the main button 
     buildButton: function(){ 

      // Create new DOM element - div 
      var button = document.createElement('div'); 

      // Set element attribute 
      button.setAttribute('id', 'strip'); 
      button.setAttribute('class', 'newclass');    

      // Style the element 
      button.style.width = "500px"; 
      button.style.height = "400px"; 
      button.style.margin="0px 10px 0px 30px"; 
      // Add content - FileAPI 
      button.innerHTML = '<div class="s1"></div><div class="list"></div>'; 





      // Print element 
      document.body.appendChild(button); 


      //Tilt Slider 

$('.list').each(function() { 
$(function() { 
$('.s1').slider({ 
range: 'min', 
min: -13, 
max: 13, 
slide: refreshRotate 

}); 


function refreshRotate() { 
var rotate = $('.s1').slider('value'), 
x = $('.x'); 
x.html(rotate); 
$('.list').css('-webkit-transform', 'rotate(' + rotate + 'deg)'); 
$('.list').css('-moz-transform', 'rotate(' + rotate + 'deg)'); 
$('.list').css('-ms-transform', 'rotate(' + rotate + 'deg)'); 
     $('.list').css('-o-transform', 'rotate(' + rotate + 'deg)'); 
     $('.list').css('transform', 'rotate(' + rotate + 'deg)'); 
} 
}); 

}); 




     } 
    }; 





document.getElementById("first-div").onclick = dom.buildButton;