如何将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附加到动态创建的元素？

回答

相关问题