Question

我正在为明信片写一个构造函数。在这个构造函数上，我必须能够添加文本和输入来编辑这些文本。这些文本是可拖的。我有将文本和输入附加到正确位置的功能：

function addTextWithControls(maxId, posX, posY, text, fontstyles) {                   
        var idForAdding = parseInt(maxId);  
        idForAdding++; //get id for appending elements
        $('#inputsBox').append('<div class="inputBox"><input type="text" name="text'+idForAdding+'" id="text'+idForAdding+'Inp" placeholder="Введите текст" value="'+text+'" onkeyup="changeText('+idForAdding+');" data-type="textInput" data-id="'+idForAdding+'"/><span id="text'+idForAdding+'Remover" data-type="remover" class="textRemover" data-id="'+idForAdding+'"></span><div class="cleaner"></div></div>');

        $('div.finishedPic').append('<span id="text'+idForAdding+'Span" data-type="textOnPic" style="left: '+posX+'px; top:'+posY+'px; '+fontstyles+'" data-id="'+idForAdding+'">'+text+'</span>');

         $(function() {        
            //calling .draggable for new appended element
            $( "div.finishedPic span" ).draggable({ containment: "parent" , 
                drag: function(){
                    console.log('.');                        
                },
            });
            //calling .sortable for new appended element
            $( "#inputsBox" ).sortable({
                placeholder: "ui-state-highlight",
                update: function(){
                    setZindexes(); 
                }
            });
            $( "#inputsBox" ).disableSelection();

        });

    }

我有两种方法可以调用这个addTextWithControls（）函数： 第一种方式： 在加载文档时，我调用了initCard（）函数：

     $(document).ready(function(){
        initCard();
     });

因此initCard（）函数包含addTextWithControls（）函数：

 function initCard(json) {
        $('div.finishedPic img').attr('src', json.image);  //set background image                    
        $.each(json.texts, function() { //parse json for getting information
            var styles = '';                
            var obj = this.fontstyles;               
            forEach(obj, function(key, value){
                styles += key+': '+value+'; '; //get string with text styles. String looks like: 'font-size: 12px; color: #fff000;' 
            })                
            addTextWithControls(this.id, this.posX, this.posY, this.text, styles);
        });

输入名称为“json”的数据，它是有关文本图层的信息。字体大小，颜色，字体样式等这个变种是工作！

但是如果想通过这种方式调用相同的函数addTextWithControls（）：

        $(document).ready(function(){
           $('#addText').on('click', function(){                
             var id = getMaxTextId();   //get max id before appending             
             addTextWithControls(id, '320', '120', 'Test sample', 'font-size: 25px; color: red;');
           });
        });

文本和输入附加但我发生错误未捕获的TypeError：对象＃没有方法'draggable'与（来自控制台的此信息链接。我无法添加图片，因为没有足够的声誉）：

$(function() {                
            $( "div.finishedPic span" ).draggable({ containment: "parent" ,
   Uncaught TypeError: Object #<Object> has no method 'draggable'  
                drag: function(){
                    console.log('.');                        
                },
            });

可拖动不工作。所以主要的问题是：为什么由两个不同位置调用的相同函数addTextWithControls（）的行为不同。请帮助我，因为我的大脑正在融化。

P.S。对不起我的英语错误。

Answer 1

看起来你还没有包含jQuery UI脚本您可以将这些添加到您的html：

<script src="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"</script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

或者，也许，你在剧本之后加入了它。

Answer 2

FFFFUUUUUUUU !!!!!! 我浪费了足够的时间来处理这个fcking bug。问题出在ZFDebug吧。我在这个项目中使用Zend框架，包括ZFDebug吧有时会给javascript添加奇怪的bug。

小心翼翼地使用ZFDebug！如果您的Zend项目中发生了一些奇怪的事情，请关闭ZFDebug。

对象＃<object>没有方法＆＃39; draggable＆＃39; </object>

2 个答案: