0
我創建了一個評論腳本,當你點擊img上的任何地方時,它會在div內添加一個文本區域以及一些隱藏字段和一個按鈕。添加表單後jQuery發佈
當我按一下按鈕沒有任何反應,這裏是我的代碼
<html>
<head>
<title>Testing Redpen.io</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var status = false;
var textboxid = 0;
var dotid = 0;
var currentTB;
var currentDOT;
var dotSRC = 'dot.png';
$('img[class=stud]').on('click', function(e) {
var offset = $(this).offset();
leftE = (e.clientX - offset.left);
topE = (e.clientY - offset.top);
//alert(e.clientX - offset.left);
//alert(e.clientY - offset.top);
if(status == false){
dotup(leftE, topE);
popup(leftE, topE);
status = true;
}
else{
$('img[class=dot]').remove();
$('div[class=tb]').remove();
status = false;
}
});
var dotup = function(leftE, topE){
var dot = $('<img src="' + dotSRC + '" width="20px" height="20px" class="dot" />');
dot.css({
'position': 'absolute',
'top': (topE - 2),
'left': (leftE - 2)
});
dot.attr('id', 'tb_' + dotid);
currentDOT = 'tb_' + dotid;
$('body').append(dot);
dotid++;
};
var popup = function(leftE, topE){
var textbox = $('<div class="tb"></div>');
textbox.append('<form name="tb" id="Addtb" method="post" action="add_comment.php"><textarea></textarea><input type="button" id="submitTB" name="submitTB" value="Add Comment" /><input type="hidden" name="leftE" value="' + leftE + '" /><input type="hidden" name="topE" value="' + topE + '" /></form>');
textbox.css({
'position': 'absolute',
'top': (topE + 5),
'left': (leftE + 5)
});
textbox.attr('id', 'tb_' + textboxid);
currentTB = 'tb_' + textboxid;
$('body').append(textbox);
textbox.find('textarea').focus();
textboxid++;
};
$("#submitTB").on('click', function(event){
console.log('button clicked');
event.preventDefault();
console.log('hmm not preventing the default');
$.post('test_add.php', $("#tb").serialize());
return false;
});
});
</script>
</head>
<body>
<img class="stud" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" />
</body>
</html>
你能否提供[小提琴](http://jsfiddle.net)讓人們更容易測試? – mechalynx 2014-09-29 02:18:57
http://jsfiddle.net/sp7uoeeq/ – 2014-09-29 02:25:15