首先，这里是我脚本的链接，我遇到了问题： Link to the script
我的剧本;
单击图像上的任意位置以创建注释，该部分有效。 当您单击现有注释并添加注释时，它可以正常工作，但是当您尝试添加其他注释时，它不起作用。有人可以帮我绑定一下吗？
修改 当您输入评论时，请转到另一个标签/评论，不添加评论框显示。
我的js的源代码
$(document).ready(function() {
getComments();
var imgClass = "proof",
bodyEle = $('img.' + imgClass).parent(),
id = 0,
currentDot,
currentDiv,
tabAdded = false,
currentTabID,
viewingTab = false,
status = false;
/*$("img." + imgClass).mouseover(function( ){
$(this).css("cursor", "url(lib/images/cursor-2.png)");
console.log('hmmm');
});
$("div.proof_container").on('click', function(){
if(status){
$("#nDiv_" + (id - 1)).remove();
$("#nDot_" + (id - 1)).remove();
}
});*/
$("img." + imgClass).on("click", function(event){
if(viewingTab){
$('.nBox').each(function(){
$(this).hide();
});
viewingTab = false;
}
var offset = $(this).offset(),
leftE = (event.clientX - offset.left),
topE = (event.clientY - offset.top);
//error testing
/*
console.log('Offset: ' + offset);
console.log('Left: ' + leftE);
console.log('Top: ' + topE);
*/
var newCon = $('<div class="com_container"></div>'),
newDot = $('<img src="lib/img/circle.png" width="25px" height="25px" class="nDot" />'),
newDiv = $('<div class="nBox"></div>'),
newForm = $('<form name="nForm" id="nForm" method="post"></form>'),
newText = $('<textarea name="nText" class="nText"></textarea>'),
newLeft = $('<input type="hidden" class="nLeft" name="nLeft" />'),
newTop = $('<input type="hidden" class="nTop" name="nTop" />'),
newButton = $('<input type="button" name="nButton" value="Add Comment" />');
if(status == false){
//css
newDot.css({
'position': 'absolute',
'left': (leftE + 3),
'top': (topE - 13)
});
newDiv.css({
'position': 'absolute',
'left': (leftE + 24),
'top': (topE + 8)
});
//id's
newDot.attr('id', 'nDot_' + id);
newDiv.attr('id', 'nDiv_' + id);
//set currents
currentDiv = $("#nDiv_" + id);
currentDot = $("#nDot_" + id);
id++;
newDiv.append(newForm);
newForm.append(newText);
newForm.append(newLeft);
newForm.append(newTop);
newForm.append(newButton);
newButton.hide();
newLeft.val(leftE);
newTop.val(topE);
bodyEle.append(newDot);
bodyEle.append(newDiv);
status = true;
//textarea change
newText.bind('input propertychange', function() {
if($(this).val() == ""){
newButton.hide();
}
else{
newButton.show();
}
});
//button submit
$(newButton).on('click', function( ){
//check to see if tab has already been added
if(tabAdded == false){
//create tab
$.get("createTab.php", {left: leftE, top: topE}).done(function(data){
var obj = $.parseJSON(data);
tabAdded = true;
currentTabID = obj.tab;
//create comment
$.post("test_add.php", {comment: newText.val(), tab_id: currentTabID}).done(function(data){
//getName
$.get("get_name.php").done(function(data){
var obj = $.parseJSON(data);
var newComment = $('<div class="comm">' + newText.val() + '<br />-' + obj.name + '</div>');
newForm.before(newComment);
newButton.hide();
newText.val("");
});
getComments();
return;
});
});
}
else{
$.post("test_add.php", {comment: newText.val(), tab_id: currentTabID}).done(function(data){
//getName
$.get("get_name.php").done(function(data){
var obj = $.parseJSON(data);
var newComment = $('<div class="comm">' + newText.val() + '<br />-' + obj.name + '</div>');
newForm.before(newComment);
newButton.hide();
newText.val("");
});
getComments();
return;
});
}
});
}
else{
if(tabAdded){
$("#nDiv_" + (id - 1)).remove();
tabAdded = false;
currentTabID = "";
}
else{
$("#nDiv_" + (id - 1)).remove();
$("#nDot_" + (id - 1)).remove();
}
status = false;
}
});
function getComments(){
var project_id = '1'; //testing purpose
$.get( "get_comments.php", { project_id: project_id }).done(function( data ) {
var obj = $.parseJSON(data);
//testing info
console.log(obj);
for(var i = 0; i < obj.length; i++){
var newTabLeft = obj[i].tab.left,
newTabTop = obj[i].tab.top,
newTabID = obj[i].tab.comment_id;
newTabDot = $('<img id="tab_' + newTabID + '" src="lib/img/circle.png" width="25px" height="25px" class="TDot" />'),
newTabDiv = $('<div id="tabDiv_' + newTabID + '" class="nBox"></div>'),
newTabForm = $('<form name="nForm" id="nForm_' + newTabID + '" method="post"></form>'),
newTabText = $('<textarea name="nText" id="nText_' + newTabID + '" class="nText"></textarea>'),
newTabLeftInput = $('<input type="hidden" id="nLeftInput_' + newTabID + '" class="nLeft" name="nLeft" />'),
newTabTopInput = $('<input type="hidden" id="nTopInput_' + newTabID + '" class="nTop" name="nTop" />'),
newTabIDInput = $('<input type="hidden" id="nIDInput_' + newTabID + '" class="nTop" name="nTabID" />'),
newTabButton = $('<input type="button" id="nButton_' + newTabID + '"name="nButton" value="Add Comment" />');
//css
newTabDot.css({
'position': 'absolute',
'left': (parseInt(newTabLeft) + 3),
'top': (parseInt(newTabTop) - 13)
});
newTabDiv.css({
'position': 'absolute',
'left': (parseInt(newTabLeft) + 24),
'top': (parseInt(newTabTop) + 8)
});
newTabDiv.append(newTabForm);
newTabForm.append(newTabText);
newTabForm.append(newTabLeftInput);
newTabForm.append(newTabTopInput);
newTabForm.append(newTabIDInput);
newTabForm.append(newTabButton);
newTabDiv.hide();
newTabButton.hide();
bodyEle.append(newTabDot);
bodyEle.append(newTabDiv);
//addcomments before form
for(var x = 0; x < obj[i].comments.length; x++){
var newCommentBox = $('<div class="comm">' + obj[i].comments[x].comment + '<br /> - ' + obj[i].comments[x].client_name + '</div>');
newTabForm.before(newCommentBox);
}
//textarea change
$('#nText_' + newTabID).on('input propertychange', function() {
console.log('being changed');
if($(this).val() == ""){
$('#nButton_' + newTabID).hide();
}
else{
$('#nButton_' + newTabID).show();
}
});
$("img.TDot").on('click', function(){
if(status){
console.log('This Is Being Called');
$(".nDot").each(function(){
$(this).remove();
});
}
$('.nBox').each(function(){
$(this).hide();
});
var id = $(this).attr('id');
var newId = id.split("_");
$('#tabDiv_' + newId[1]).show();
viewingTab = true;
}).on('mouseover', function(){
$(this).css('cursor', 'pointer');
});
newTabButton.on('click', function(){
$.post("test_add.php", {comment: newTabText.val(), tab_id: newTabID}).done(function(data){
//getName
$.get("get_name.php").done(function(data){
var obj = $.parseJSON(data);
var newComment = $('<div class="comm">' + newTabText.val() + '<br /> - ' + obj.name + '</div>');
newTabForm.before(newComment);
newTabButton.hide();
newTabText.val("");
$('nText_' + newTabID).bind('input propertychange', function() {
if($(this).val() == ""){
$('nButton_' + newTabID).hide();
}
else{
$('nButton_' + newTabID).show();
}
});
});
getComments();
return;
});
});
}
});
}
});// JavaScript Document