javascript - dblClick() 不起作用

Question

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

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

我在两个 div 内添加了两个文本。这个div是可拖动的。这些 div 又位于另外两个可调整大小的 div 下

现在我想做一个功能，当我点击包含文本的 div 时，该 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 的动态创建。

使用委托(delegate)事件处理程序来代替，附加到一个不变的祖先(如果没有更接近的可用的话，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 选择器，然后 它对引起事件的任何匹配元素调用函数。这意味着它们可以处理尚不存在的元素。