動態HTML導致庫失敗

我無法獲得此動態創建的內容與一起使用jQuery滑塊和jscolor。庫函數被忽略。我猜這是與處理事物的順序有關。請有人指出我正確的方向嗎？動態HTML導致庫失敗

下面是失敗代碼的簡化示例。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

    <title>Test dynamic code and jscolor</title> 
    <script type="text/javascript" src="jscolor/jscolor.js"></script> 
    <script type="text/javascript"> 
     function addcontent() { 
      document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />'; 
      document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>'; 
     } 

     $(function() { 
      $("#colTslider").slider({ 
       value: 100, 
       min: 0, 
       max: 255, 
       slide: function(event, ui) { 
        $("#colT").val(ui.value); 
       } 
      }); 
     }); 

    </script> 
</head> 

<body onload="addcontent();"> 
    <div id="colordiv"></div> 
    <div id="sliderdiv"></div> 
</body>

如果我手動移動INPUT標記爲它工作正常的DIV，但爲什麼不這項工作？

來源

2013-10-31 Head for the hills

任何想法jscolor的問題？謝謝你對滑塊問題的所有反應。現在的效果非常好。:-) –

什麼是jscolor問題？ – Rui

@Headforthehills如果答案幫助你解決了問題，請選擇最好的答案並將其標記爲正確答案（使用答案左側的標記）。這是它在這裏的工作原理。如果您有其他問題，請提出新問題。 – kapa

你必須注入後致電滑塊HTML。

http://jsfiddle.net/p46cs/

function addcontent() { 
    document.getElementById('colordiv').innerHTML = '<input id="valColourRGB" class="color" />'; 
    document.getElementById('sliderdiv').innerHTML = '<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>'; 
    $("#colTslider").slider({ 
      value: 100, 
      min: 0, 
      max: 255, 
      slide: function(event, ui) { 
       $("#colT").val(ui.value); 
      } 
     }); 
    } 

addcontent();

來源

2013-10-31 15:43:01

load會比DOMContentLoaded晚發火，即jQuery的.ready()依賴於（使用$(function)等效於此）。

修復代碼的一種方法是去除bodyonload（你不應該使用這種方法稱爲內聯事件處理程序反正），並調用addContent這樣的：

$(function() { 
     addContent(); 

     $("#colTslider").slider({ 
      value: 100, 
      min: 0, 
      max: 255, 
      slide: function(event, ui) { 
       $("#colT").val(ui.value); 
      } 
     }); 
    });

來源

2013-10-31 15:40:28 kapa

爲什麼有人會爲這個答案投票？這是正確的任何其他 – Rui

@Rui我是一些大規模下調，但系統刪除他們的受害者。很多憤怒的人在這裏:)。 – kapa

jQuery的可能試圖您內容加載到DOM之前分配的事件。嘗試將調用addContent（）放入ready方法中。

這裏是一個斌jQuery的ready事件後 http://jsbin.com/eYaqoci/1/edit

來源

2013-10-31 15:43:32

在window.onload會發生，這是什麼意思是：

$("#colTslider").slider({ 
       value: 100, 
       min: 0, 
       max: 255, 
       slide: function(event, ui) { 
        $("#colT").val(ui.value); 
       }

將addContent之前運行（），意爲$（'＃colTslider '）不會匹配任何元素。（見http://learn.jquery.com/about-jquery/how-jquery-works/#Launching_Code_on_Document_Ready）

您可以在安裝之前調用addContent在jQuery的ready事件處理滑塊（$（函數（）{...}），它應該開始工作：

$(function(){ 
$('#colordiv').html('<input id="valColourRGB" class="color" />'); 
$('#sliderdiv').html('<input type="text" class="p_slidernum" id="colT" name="valColourT" value="200" /><div id="colTslider"></div>'); 

$("#colTslider").slider({ 
    value: 100, 
    min: 0, 
    max: 255, 
    slide: function(event, ui) { 
     $("#colT").val(ui.value); 
    }); 
});

來源

2013-10-31 15:49:10 Rui

動態HTML導致庫失敗

回答

相關問題