javascript - 如何将javascript附加到动态创建的元素？

Question

我有一个 javascript 旋转函数设置。它与 div 元素一起由按钮动态生成。我不知道如何正确地为每个动态创建的元素附加此旋转 slider ，以便它可以对每个元素单独操作，而不是影响所有元素，只处理第一个创建的元素。如示例所示:

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

看起来您只为第一张图片配置了一次 slider 。 要为每个图像设置一个独立的旋转 slider ，请在 buildButton 函数中为单个图像在本地配置它。在那里，您可以通过 jquery 轻松创建新元素并进行必要的一对一绑定(bind)。