jquery에서 색상 선택기 메서드를 찾을 수 없습니다.

divs를 추가하는 jquery 프로젝트가 있습니다 ... 색상 선택기로 해당 div를 만들려합니다 ... 그래서 websanova-wColorPicker jquery 라이브러리를 사용하고 싶습니다. 내 코드. 색상 선택 도구 메서드가 없다는 오류가 발생합니다.jquery에서 색상 선택기 메서드를 찾을 수 없습니다.

div를 추가하는 jquery 코드를 제거하면 색상 선택 도구가 작동합니다 .. 충돌 때문에 충돌이 발생했습니다. 내가 같은 오류뿐만 아니라 다른 색상 선택기 라이브러리를 시도으로 ... 나는 JQuery와 UI뿐만 아니라, 그래서 여기에

Uncaught TypeError: Object [object Object] has no method 'wColorPicker' i.html:83 
jQuery.click.show i.html:83 
f.event.dispatch jquery.1.7.1.min.js:3 
f.event.add.h.handle.i jquery.1.7.1.min.js:3

를 사용하여 내 problem..how 내가 Websanova 색상 선택기에 적용 즉, 동적 된 div를 생성 할 . 각 div는 색상 선택기입니다 .help.

코드 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Websanova Color Picker</title> 
    <link href="css/index.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="./inc/jquery.1.7.1.min.js"></script> 
    <link rel="Stylesheet" type="text/css" href="./wColorPicker.css" /> 
    <script type="text/javascript" src="./wColorPicker.js"></script> 

</head> 
<body> 
     <div id="wColorPicker7" class="hoverBox"></div> 
     <script type="text/javascript"> 

     $("#wColorPicker7").wColorPicker({onSelect:function(color){/*do something*/}, mode: 'click', effect: 'fade', color: 'yellow'}); 





    $(window).load(function(){ 

    jQuery("#coldwn").click(function(event){ 
    var showOptions = function() 
    { 
     $(this).css("background-image", "url(images/us.png)"); 
    }; 
    var showOptionso = function() 
    { 
     $(this).css("background-image", "url(images/ua.png)"); 
    }; 
    var cc = function() 
    { 
     var letters = 'ABCDEF'.split(''); 
    var c = '#'; 
    for (var i = 0; i < 6; i++) { 
     c += letters[Math.round(Math.random() * 15)]; 
    } 


     $(this).css("background-color", c); 
    }; 
w=document.getElementById('coldwn').offsetWidth; 


var x = event.pageX; 
     var p=(x-403)*100/w; 
     var per=p.toFixed(0); 



    xa = document.getElementById('coldwn').offsetTop; 
    var x = event.pageX, 
     y = event.pageY; 
    var $mystub=jQuery("<div>").addClass("node").attr('id', x+'o').css({position: "absolute",left:x,top:xa,width:"16px",height:"20px"}).hover(showOptions,showOptionso); 
    var $mystuba=jQuery("<div>").addClass("color").attr('id', x+'i').css({position: "absolute",top:"7px",width:"16px",height : "14px",value:p,autocomplete:"off"}).click(cc); 
    $mystub.append($mystuba); 
    $('#coldwn').append($mystub); 

$("#"+x+"i").wColorPicker({onSelect:function(color){/*do something*/}, mode: 'click', effect: 'fade', color: 'yellow'}); 
    $("#"+x+"o").draggable({ containment: "#coldwn", scroll: false,axis: "x", 
    start: function() {  }, 
     drag: function(event, ui) { 
     var x = event.pageX; 
     var p=(x-403)*100/w; 
     var per=p.toFixed(0); 
     $('textarea').val(per); 



    // -webkit-linear-gradient(bottom, rgb(40,51,157) 32%, rgb(68,77,189) 66%, rgb(105,138,14) 77%); 
     }, 
     stop: function() { 
     var x = event.pageX; 
     var p=(x-403)*100/w; 
     var per=p.toFixed(0); 
     alert(per); 

     } }); 


    }); 




    }); 
function d() 
{ 


var i=20; 
var str=""; 

alert($('#coldwn').children("div").size()); 

$('.node').children("div").each(function() 
{ 
var kid = $(this); 
var cr = $(this).css("background-color"); 
str+=cr+" "+i+"%,"; 
console.log(str); 
i+=20; 
console.log(kid.attr('id'),cr); 
}).sort(); 


str+="rgb(105,138,14) 100%)"; 
alert(str); 
$('#mainarea').css("background-image","-webkit-linear-gradient(bottom, "+str); 

console.log("background-image","-webkit-linear-gradient(bottom, "+str); 
// $('#mainarea').css("background-image","-webkit-linear-gradient(bottom, rgb(40,51,157) 32%, rgb(68,77,189) 66%, rgb(105,138,14) 77%)"); 

} 
     </script> 
    <p> 
     <span id="u70">CSS GRADIENTS</span> 
    </p> 
    <p> 
     &nbsp; 
    </p> 
    <div id="wrap"> 
     <div id="topop" class="topop"></div> 
     <div id="mainarea" class="maingrad"></div> 
     <div id="coldwn" class="col"></div> 
    </div><br> 
    <div id="wColorPicker7" class="hoverBox"></div> 


</body> 
</html>

참고 : JQuery와의 코드가 divs..i이 colorpickers로 다음 원하는 생성

출처

2012-05-10 Suraj

코드를 알려주십시오. –

코드를 정리해야합니다. 내가 할 첫 번째 일은 모든 스타일을 자바 스크립트로 동적으로 추가하는 대신 스타일 시트로 옮기는 것입니다. 그런 다음 자바 스크립트를 일관되게 만들기 위해 노력해야합니다. 나는. jquery 함수로 만'$'또는'jQuery' 만 사용하십시오. 순수한 자바 스크립트 나 DOM 조작을위한 jQuery만을 사용하고, 들여 쓰기 등을 추가하십시오. – jrummell

이것을 고려하십시오 .. yi에 대한 단서는 .. 2 다른 색상 선택기 라이브러리뿐만 아니라 여전히 오류가 발생 – Suraj

다른 ...에 대한 확인했다 override..each it..jquery 수입을 얻었다 중복 없음

출처

2016-07-13 14:24:12 Suraj

솔루션에 대한 자세한 내용을 추가하십시오 – abarisone

jquery에서 색상 선택기 메서드를 찾을 수 없습니다.

답변

관련 문제