当我点击textarea内部时，它会提交表单

Question

我正在使用Twitter Bootstrap。

我使用此功能创建模态

 function makeModalEnroll(name, description, i, id) {
     var modal = '<div class="modal fade" id="enroll' + i + '" tabindex="-1" role="dialog" aria-labelledby="enrollabel" aria-hidden="true">';
     modal += '<div class="modal-dialog modal-md">';
     modal += '<div class="modal-content">';
     modal += '<div class="label-success modal-header" style="border-top-left-radius: 5px; border-top-right-radius: 5px;">';
     modal += '<h3><span class="label label-success">Enroll on ' + name + ' <span class="glyphicon glyphicon-pencil"></span></span></h3>';
     modal += '</div>';
     modal += '<div class="modal-body">';
     modal += '<div class="row">';
     modal += '<div class="col-sm-6">';
     modal += '<img data-src="holder.js/200x200">';
     modal += '</div>';
     modal += '<div class="col-md-9 col-md-offset-3">';
     modal += '<form role="form" id="enrollForm' + i + '">';
     modal += '<input type="hidden" name="eventID" id="eventID" value="' + id +'">';
     modal += '<div class="list-group">';
     modal += '<a href="#" class="list-group-item list-group-item-success"> <h4><span class="badge">Description:</span> <span class="label label-success pull-right">' +  description + '</span></h4></a>';
     modal += '<a href="#" class="list-group-item list-group-item-success"> <h4><span class="badge">Your message</span></h4><textarea id="userMessage" name="userMessage" class="textarea"></textarea></a>';
     modal += '</div>';
     modal += '</form>';
     modal += '</div>';
     modal += '</div>';
     modal += '</div>';
     modal += '<div class="modal-footer">';
     modal += '<button type="button" id="enroll"' + i + '" class="btn btn-success" data-dismiss="modal"> Подать заявку <span class="glyphicon glyphicon-arrow-right"></span> </button>';
     modal += '<button type="button" class="btn btn-danger" data-dismiss="modal"> Закрыть <span class="glyphicon glyphicon-remove"></span> </button>';
     modal += '</div>';
     modal += '</div>';
     modal += '</div>';

     return modal;
};

我创建模态的Jquery循环看起来像这样

$.post("loadallevents.html", function(data) {
    var data = JSON.parse(data);
    var k = 0; 
    $.each(data, function(i, item){
        k++;
        $("#all_events").append(makeTemplate(item.description, item.eventStatus.name, item.name, k));
        $("#main_container").append(makeModalInfo(item.name, item.description, item.capacity, item.dateTime, item.eventStatus.name, k));
        $("#main_container").append(makeModalEnroll(item.name, item.description, k, item.id));
        $("#tooltip" + k).tooltip();
        $("#enroll" + k).click(function(){
            $("#enrollForm" + k).ajaxSubmit({url: 'enroll.html', type: 'post'});
        });
    });
}); 

表单看起来像这样

但是当我想写一条消息并在textarea中单击时 - 它会提交表单。

为什么呢？有什么问题？

Answer 1

好吧，表单不是真正发布的，它只是重新加载页面。问题是，您将textarea嵌套在“A” - 标签：

中

<a href="#" class="list-group-item list-group-item-success"> <h4><span class="badge">Your message</span></h4><textarea id="userMessage" name="userMessage" class="textarea"></textarea></a>

删除包裹textarea的链接，你应该没问题：

<h4><span class="badge">Your message</span></h4><textarea id="userMessage" name="userMessage" class="textarea"></textarea>

额外： 添加额外脚本后，我查看了您的代码。似乎你将点击（进行ajax调用）绑定到ID build这样的“enroll + i +”，所以当点击具有该ID的元素时，表单将提交。

您在表单中使用该ID 2次。你有一个DIV，其类“Modal fade”与你的按钮具有相同的ID。两个ID都构建为“enroll + i +”。

Answer 2

您的文本区域位于锚标记内。所以我猜它不是提交表单，只是重新加载。 我也可以看到

附近的错误

<button type="button" id="enroll"' + i + '" class="btn btn-success" data-dismiss="modal">         
    Подать заявку 
    <span class="glyphicon glyphicon-arrow-right"></span> 
</button>;

报名后，有一个额外的双引号。