Question

我创建了一个评论脚本，当你点击img上的任意位置时，它会在div中添加一个文本区域以及一些隐藏字段和一个按钮。

当我点击按钮时，这里没有任何问题是我的代码

<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>

Answer 1

事件处理程序根本没有附加到按钮，这就是问题所在。控制台没有提供任何错误，因此，脚本甚至没有指向尝试附加处理程序 - 因此，既不是错误也不是事件处理程序。

解决方案是将事件监听器附件放在popup函数中，其中首先应该是它。只需复制粘贴

即可

$("#submitTB").on('click', function (event) {

        ...

    });

进入

var popup = function (leftE, topE) { ... }

声明，最后它会起作用。

这是你的fiddle分叉。 （我也赞扬了preventDefault()行，但它与此问题无关）。

添加表单后的jQuery帖子

1 个答案: