如何使用javascript更改div的CSS

Question

我使用jquery創建了div，之後創建了div，我想更改它的CSS。但是，更改不起作用。

這是我的HTML：

<form> 
     <input type="text" id="color" placeholder="color"><br> 
     <input type="text" id="height" placeholder="height"><br> 
     <input type="text" id="width" placeholder="width"><br> 
     <input type="button" id="make" value="Make"> 
    </form> 

，這是jQuery的：

$(document).ready(function() { 
      $('#make').click(function() { 
       if (($('#color').val().length) == 0 || ($('#height').val().length) == 0 || ($('#width').val().length) == 0) { 
        alert('lol') 
       } else { 
        var color = $('#color').val(); 
        var height = $('#width').val(); 
        var width = $('#height').val(); 
        $('body').append('<div id="kast" style="background:'+color+'; width:'+width+'px; height:'+height+'px;"></div>') 
        $('#make').remove(); 
        $('form').append('<input type="button" id="change" value="Change">'); 

       } 
      }) 
      $('#change').click(function() { 

       var color = $('#color').val(); 
       var height = $('#width').val(); 
       var width = $('#height').val(); 
       $('#kast').css('background-color', color); 
      }) 
     }) 

我希望有人能幫助我:)

Answer 1

'上'，你正在創建它嘗試動態：on

$('body').on('click','#change',function() { 
     var color = $('#color').val(); 
     var height = $('#width').val(); 
     var width = $('#height').val(); 
     $('#kast').css('background-color', color); 
    }) 

Answer 2

當你需要使用.on()動態元素

$('form').on('click', '#change', function() { 
    var color = $('#color').val(); 
    var height = $('#width').val(); 
    var width = $('#height').val(); 
    $('#kast').css('background-color', color); 
}) 

DEMO

Answer 3

與事件委託更換click()：

$(document).on('click, '#change', function() { 
    ... 
}); 

Answer 4

在這種情況下，你不能只用作爲 $('#change').click綁定一個

事件在您已經加載頁面後創建的DOM對象上。你應該使用下面這些：

$(document).on('click', '#change', function() { 

      var color = $('#color').val(); 
      var height = $('#width').val(); 
      var width = $('#height').val(); 
      $('#kast').css('background-color', color); 

     });