dblClick（）不工作

Question

我有一个很大的jQuery代码..

事情是，我想创建一个在线横幅编辑器。

我在两个div里面添加了两个文本。这个div是可拖动的。反过来的DIV位于下两个div的

现在我想做出特色，当我对包含文本的DIV cleck，在div必须让编辑，这样我可以在线编辑

它可以调整大小，但不知道为什么，在DBLCLICK心不是工作

这里是我的代码

<script type="text/javascript"> 
$(function(){ 
    $.contextMenu({ 
     selector: '.context-menu-icon, .context-menu-text', 
     build: function($trigger, e) { 
      // this callback is executed every time the menu is to be shown 
      // its results are destroyed every time the menu is hidden 
      // e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data) 
      return { 
       callback: function(key, options) 
       { 
        if(key=='delete') 
         $(this).remove(); 
       }, 
       items: { 
        "edit": {name: "Edit", icon: "edit"}, 
        "cut": {name: "Cut", icon: "cut"}, 
        "copy": {name: "Copy", icon: "copy"}, 
        "paste": {name: "Paste", icon: "paste"}, 
        "delete": {name: "Delete", icon: "delete"}, 
        "sep1": "---------", 
        "quit": {name: "Quit", icon: "quit"} 
       } 
      }; 
     } 
    }); 
}); 
    $(document).ready(function() 
    { 
     $.fn.jPicker.defaults.images.clientPath='color-picker-img/'; 
     $('.color_text').jPicker(); 


     $("#blink_icon").dblclick(function() 
      { 
       alert("Handler for .dblclick() called."); 
      }); 
     $(".edit_text").dblclick(function() 
      { 
       alert("Handler for .dblclick() called."); 
      }); 










     $("#accept_first_text").click(function() 
     { 
      var img_w = $('#target').width(); 
      var img_h = $('#target').height(); 
      var first_text_width = parseFloat(parseFloat(img_w)/2); 
      var first_left = parseFloat(parseFloat(img_w)-parseFloat(first_text_width))/2; 
      var first_top = $('#first_text_top').val(); 
      var first_left = $('#first_text_left').val(); 
      var first_color = $('#first_text_color').val(); 
      var first_size = $('#first_text_size').val(); 
      var first_text_desc = $('#first_text_area').val(); 
      $('#drag_first_text').css({"left":first_left+"px", 
           "top":first_top+"px", 
           "position":"absolute", 
           "width":first_text_width+"px", 
           "z-index":"5"}); 
      $('#first_text').css({'font-weight':'bold', 
            'color':'#'+first_color, 
            'font-size':first_size+'px'});     
      $('#first_text').html(first_text_desc);   
      $('#first_text').resizable();   
     }); 
     $("#accept_second_text").click(function() 
     { 
      var img_w = $('#target').width(); 
      var img_h = $('#target').height(); 
      var second_text_width = parseFloat(parseFloat(img_w)/2);  
      var second_left = parseFloat(parseFloat(img_w)-parseFloat(second_text_width))/2; 
      var second_top = $('#second_text_top').val(); 
      var second_left = $('#second_text_left').val(); 
      var second_color = $('#second_text_color').val(); 
      var second_size = $('#second_text_size').val(); 
      var second_text_desc = $('#second_text_area').val(); 
      $('#drag_second_text').css({"left":second_left+"px", 
           "top":second_top+"px", 
           "position":"absolute", 
           "width":second_text_width+"px", 
           "z-index":"5"}); 
      $('#second_text').css({'font-weight':'bold', 
            'color':'#'+second_color, 
            'font-size':second_size+'px'});     
      $('#second_text').html(second_text_desc);   
      $('#second_text').resizable();    
     }); 

     $("#get_image").click(function() 
     { 
     html2canvas([document.getElementById('main_canvas')], 
     { 
       onrendered: function (canvas) { 
       /*document.getElementById('canvas').appendChild(canvas);*/ 
       var Imagedata = canvas.toDataURL('image/png'); 
       var imagename = $('#image_name').val(); 
       // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server 
       $.post("save.php",{'image_link':Imagedata,'image_name':imagename}, 
         function(img_data) 
         { 
          var final_href = $('<a/>',{'id':'final_href'}); 
          $(final_href).prop({'href':'download.php?download='+img_data,'target':'_blank'}); 
          var final_img = $('<img/>', {'id':'final','src':img_data}); 
          $(final_img).css({"width":"100px","height":"auto"}); 
          $(final_href).append(final_img); 
          $('#final_image').html(final_href); 
          ShowModalPopup('div_show_banner'); 
         } 
        );  
      } 
     }); 
     }); 

     $("#get_animated_image").click(function() 
     { 
     html2canvas([document.getElementById('main_canvas')], 
     { 
       onrendered: function (canvas) { 
       /*document.getElementById('canvas').appendChild(canvas);*/ 


       var shots = []; 
       var grabLimit = 400; // Number of screenshots to take 
       var grabRate = 50; // Miliseconds. 500 = half a second 

       var count  = 0; 

       function showResults() 
       { 
        //console.log(shots); 
        for (var i=0; i<shots.length; i++) { 
         document.write('<img src="' + shots[i] + '"/>\n'); 
        } 
       } 

       var grabber = setInterval(
              function() 
              { 
               count++; 
               if (count>grabLimit) 
               { 
                clearInterval(grabber); 
                showResults(); 
               } 

               var img = canvas.toDataURL("image/png"); 
               shots.push(img); 
              }, grabRate); 

       var Imagedata = canvas.toDataURL('image/png'); 
       var imagename = $('#animated_image_name').val(); 


      } 
     }); 
     }); 

    $("#blink_icon").click(function() 
    { 
     var interval = 100; 
     var time = 90000000; 
     var timer = window.setInterval(function() 
             { 
             $("#drag_wrapper").css("opacity", "0.1"); 
             window.setTimeout(function() 
                 { 
                 $("#drag_wrapper").css("opacity", "1"); 
                 }, 100); 
             }, interval); 
     window.setTimeout(function(){clearInterval(timer);}, time); 
    }); 




    $("#upload_icon_Form").on('submit',(function(e) { 
     e.preventDefault(); 
     $.ajax({ 
      url: "upload_icon.php", 
      type: "POST", 
      data: new FormData(this), 
      contentType: false, 
      cache: false, 
      processData:false, 
      success: function(data) 
      { 
      $("#targeticonLayer").html(data); 
      }, 
      error: function() 
      { 
      }   
     }); 
    }));  
    $("#upload_template_Form").on('submit',(function(e) { 
     e.preventDefault(); 
     $.ajax({ 
      url: "upload_template.php", 
      type: "POST", 
      data: new FormData(this), 
      contentType: false, 
      cache: false, 
      processData:false, 
      success: function(data) 
      { 
      $("#targetLayer").html(data); 
      }, 
      error: function() 
      { 
      }   
     }); 
    }));  
    }); 
$(document).ready(function() 
{ 

}); 

function dump_template(src,close_div) 
{ 
    var item_template = $('<img/>', {'id':'target','src':src}); 
    var first_text = $('<div/>', {'id':'first_text','class':'edit_text'}); 
    $(first_text).css({"left":"0px", 
         "top":"0px", 
         "color":"#fff", 
         "position":"relative", 
         "width":"auto", 
         "text-align":"center"}); 
    $(first_text).html('Demo First Text'); 


    var second_text = $('<div/>', {'id':'second_text','class':'edit_text'}); 
    $(second_text).css({"left":"0px", 
         "top":"0px", 
         "color":"#fff", 
         "position":"relative", 
         "width":"auto", 
         "text-align":"center"}); 
    $(second_text).html('Demo Second Text');      


    $('#main_canvas').html(item_template); 
    var width = $("#target").width(); 
    var height = $("#target").height();; 
    $('#main_canvas').css({'height':height+'px','width':width+'px'}); 


    var drag_first_text = $('<div/>', {'id':'drag_first_text','class':'context-menu-text'}); 
    var drag_second_text = $('<div/>', {'id':'drag_second_text','class':'context-menu-text'}); 
    $(drag_first_text).css({"left":"20px", 
       "top":"100px", 
       "position":"absolute", 
       "width":"auto", 
       "z-index":"5", 
       "text-align":"center", 
       }); 
    $(drag_second_text).css({"left":"20px", 
       "top":"150px", 
       "position":"absolute", 
       "width":"auto", 
       "z-index":"5", 
       "text-align":"center"}); 
    $(drag_first_text).append(first_text); 
    $(drag_second_text).append(second_text); 

    $('#main_canvas').append(drag_first_text).append(drag_second_text); 

    $(drag_first_text).draggable({grid:[1,1]}); 
    $(drag_second_text).draggable({grid:[1,1]}); 
    HideModalPopup(close_div); 
} 

function dump_icon(src,close_div) 
{ 
    var dragg_wrapper = $('<div/>', {'id':'drag_wrapper','class':'context-menu-icon'}); 
    $(dragg_wrapper).css({"left":"20px", 
       "top":"20px", 
       "position":"absolute", 
       "width":"50px", 
       "z-index":"5"}); 
    var item_img = $('<img/>', {'id':'icon_img','src':src}); 
    $(item_img).css({"left":"0px", 
       "top":"0px"}); 
    $(dragg_wrapper).append(item_img);   
    $('#main_canvas').append(dragg_wrapper); 
    $(dragg_wrapper).draggable({grid:[1,1]}); 
    $("#icon_img").resizable(); 
    HideModalPopup(close_div); 
} 
function choose_template() 
{ 
    $.post("showtemplate.php",{'show':'show'}, 
     function(data) 
     { 
      $('#div_template_list').html(data); 
      ShowModalPopup('div_show_template'); 
     }); 
} 
function choose_icon() 
{ 
    $.post("showicon.php",{'show':'show'}, 
     function(data) 
     { 
      $('#div_icon_list').html(data); 
      ShowModalPopup('div_show_icon'); 
     }); 
} 
</script> 


EDIT 

正如有人要求，这里的HTML

<div class="container"> 
    <div class="row"> 
     <div class="span11"> 
      <div class="demo-box"> 
       <div class="page-header"> 
       <h1>Dynamica Banner Creator</h1> 
       </div> 
       <h4>Upload Banner Template</h4> 
       <div style="margin-bottom: 10px; height: auto; overflow:hidden;"> 
       <div class="button_div"> 
       <a href="javascript:void(0);" 
       onclick="ShowModalPopup('div_upload_template');"> 
       Upload Template 
       </a> 
       </div> 
       <div class="button_div"> 
       <a href="javascript:void(0);" 
       onclick="choose_template()">Choose Template</a> 
       </div> 
       <div class="button_div"> 
       <a href="javascript:void(0);" 
       onclick="ShowModalPopup('div_upload_icon');">Upload Icon</a> 
       </div> 
       <div class="button_div"> 
       <a href="javascript:void(0);" 
       onclick="choose_icon()">Choose Icon</a> 
       </div> 
       </div> 

       <div style="position:relative;" id="main_canvas"> 
       </div> 
       </div> 
      <div id="script_frame"> 
       <h1>Enter your text details details</h1> 
       <div style="position:relative; height:auto; overflow:hidden;"> 
       <div id="first_text_setter"> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">First Text Top-Pos.</span> 
        </div> 
        <div class="text_container"> 
        <input id="first_text_top" name="first_text_top" 
        class="input_text"/> 
        </div> 
        </div> 
        <br/> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">First Text Left-Pos.</span> 
        </div> 
        <div class="text_container"> 
        <input id="first_text_left" name="first_text_left" 
        class="input_text"/> 
        </div> 
        </div> 
        <br/> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">First Text Color.</span> 
        </div> 
        <div class="text_container"> 
        <input id="first_text_color" name="first_text_color" 
        class="color_text"/> 
        <span class="jPicker"> 
        </span> 
        </div> 
        </div> 
        <br/> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">First Text Size.</span> 
        </div> 
        <div class="text_container"> 
        <select id="first_text_size" name="first_text_size" 
        class="input_text"> 
        <?php 
        for($i=4;$i<=32;$i=$i+2) 
        {?> 
        <option value="<?php echo $i;?>"><?php echo $i;?></option> 
        <?php 
        }?> 
        </select> 
        </div> 
        </div> 
        <br/> 
        <div class="object_container"> 
        <span class="input_span">First Text Des</span> 
        <br/> 
        <textarea id="first_text_area" name="first_text_area" class="input_text_area"></textarea> 
        </div> 
        <button id="accept_first_text">Get</button> 
        <div class="clearfix"></div> 
       </div> 
       <div id="second_text_setter"> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">Second Txt Top-Pos</span> 
        </div> 
        <div class="text_container"> 
        <input id="second_text_top" name="second_text_top" 
        class="input_text"/> 
        </div> 
        </div> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">Second Txt Left-Pos</span> 
        </div> 
        <div class="text_container"> 
        <input id="second_text_left" name="second_text_left" 
        class="input_text"/> 
        </div> 
        </div> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">Second Text Color</span> 
        </div> 
        <div class="text_container"> 
        <input id="second_text_color" name="second_text_color" 
        class="color_text"/> 
        <span class="jPicker"> 
        </span> 
        </div> 
        </div> 
        <div class="object_container"> 
        <div class="span_container"> 
        <span class="input_span">Second Text Size</span> 
        </div> 
        <div class="text_container"> 
        <select id="second_text_size" name="second_text_size" 
        class="input_text"> 
        <?php 
        for($i=4;$i<=32;$i=$i+2) 
        {?> 
        <option value="<?php echo $i;?>"><?php echo $i;?></option> 
        <?php 
        }?> 
        </select> 
        </div> 
        </div> 
        <div class="object_container"> 
        <span class="input_span">Second Txt Des</span> 
        <br/> 
        <textarea id="second_text_area" name="second_text_area" class="input_text_area"></textarea> 
        </div> 
        <button id="accept_second_text">Get</button> 
        <div class="clearfix"></div> 
       </div> 
       </div> 
       <br/> 
       <div style="clear:both; float:left; margin-top:30px; position:relative;"> 
       <div class="object_container"> 
       <span class="input_span">Image Name</span> 
       <input id="image_name" name="image_name" 
        class="input_text"/> 
       </div> 
       <br/> 
       <button id="get_image">Save Image</button> 
       </div> 
       <div style="clear:both; float:left; margin-top:30px; position:relative;"> 
       <div class="object_container"> 
       <span class="input_span">Animated Gif Name</span> 
       <input id="animated_image_name" name="image_name" 
        class="input_text"/> 
       </div> 
       <br/> 
       <button id="get_animated_image">Save Gif Image</button> 

       <button id="blink_icon">Blink</button> 

       </div> 
      </div>  
      </div> 


     </div> 
    </div> 
</div> 

Answer 1

有太多的代码需要通过，但最可能的原因是动态创建div。

使用代替的事件处理程序代替附加到不变的祖先（如果没有更接近的可用，document是默认值）。试试这个：

$(document).on('dblclick', "#blink_icon", function() 
     { 
      alert("Handler for .dblclick() called."); 
     }); 
    $(document).on('dblclick', ".edit_text", function() 
     { 
      alert("Handler for .dblclick() called."); 
     }); 

他们通过监听（在这种情况下dblclick）指定的事件冒泡的祖先工作，然后它适用于jQuery选择，然后它调用函数任何匹配导致事件的元素。这意味着他们可以处理尚不存在的元素。