如何將javascript附加到動態創建的元素？

我有一個JavaScript旋轉功能設置。它與div元素一起由一個按鈕動態生成。我很難知道如何正確地爲每個動態創建的元素附加這個旋轉滑塊，以便它可以單獨操作，而不是影響所有元素，只處理第一個創建的元素。正如所看到的例子：如何將javascript附加到動態創建的元素？

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;

來源

2014-09-01 Larson Klagsbrun

您每次添加按鈕時都會重複'id =「panzoom」''。 ID應該是唯一的。 – Barmar 2014-09-01 08:55:27

是的，我確實意識到這一點，並刪除了ID，我的問題仍然存在。謝謝你的建議。 – 2014-09-01 08:59:33

看起來你配置滑塊只有一次，第一個圖像。要爲每個圖像都有一個獨立的旋轉滑塊，爲buildButton函數中的單個圖像本地配置它。在那裏，你可以很容易地通過jQuery創建新的元素，並進行必要的一對一綁定。

來源

2014-09-01 11:18:34 fast

Heavens「一對一綁定」，這是否指使用jquery .on（）事件處理函數將旋轉函數與div生成器元素的.onclick綁定？將事件綁定到元素是我正在學習的課程。 http://jsfiddle.net/fqjvd7sa/25/ – 2014-09-03 08:52:25

使用.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;

來源

2014-09-03 20:54:41

如何將javascript附加到動態創建的元素？

回答

相關問題