我有一个很大的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>
答案 0 :(得分：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选择器然后它在导致事件的任何匹配元素上调用函数。这意味着他们可以处理尚不存在的元素。