Question

我创建了自定义表单以便快速回复（.append），现在我想使用ajax进行提交回复而不重新加载，我尝试了.on('submit', function(e)...这不起作用（尝试了事件委托）。现在我尝试了.on('click', function(e)...，这有效 - 不知道为什么。

$("#newpost").on('click', '.send', function(event) {
    event.preventDefault();
});

这不起作用：

$("#newpost").on('submit', '.send', function(event) {
    event.preventDefault();
});

附加表格：

<form id="newpost" method="post" action="/forum/addpost/"+ id +"/"+ rek +" name="newpost">
  <div class="editor" align="left">
    <textarea name="post" cols="50" rows="5"></textarea>
   <div class="submit" align="right">
     <input class="send" value="." title="Send" type="submit">
   </div>
  </div>
</form>

即使我使用事件委托，为什么.on('submit'..)也不起作用？谢谢

Answer 1

这是行不通的，因为你的textarea（name =＆＃34; post＆＃34;）名称与表单属性有冲突。

来自jquery文档： jquery submit

表单及其子元素不应使用与表单属性冲突的输入名称或ID，例如submit，length或method。名称冲突可能导致混乱的故障。有关规则的完整列表以及检查这些问题的标记，请参阅DOMLint。

Answer 2

正确的表格是

$( "#newpost" ).submit(function( event ) {
  event.preventDefault();
});

稍后编辑：我现在明白你想要什么。尝试一种新的方法。假设id是23而rek是值＆＃34;添加＆＃34;你有以下几点：

HTML

<div class="editor" align="left">
    <textarea name="post" cols="50" rows="5" id="post"></textarea>
   <div class="submit" align="right">
     <input class="send" value="." title="Send" type="button" id="23"  data-rek="add">
   </div>
  </div>

JS（也可以在外部文件中使用）：

    //get the answer based on id-s and classes
    $("body").on("click", ".send", function() {

//get what is at attribute id of the clicked link 
        var ID=$(this).attr("id");

//get the text from the form with id "fasttext"
        var thetext = $("#post").val();

//take the value of rek ( don't know what means :) )
        var therek = $(this).attr("data-rek");


//create the string that will be posted
        var theString = 'post=' + thetext;

//post the form using ajax and without reloading the page
            $.ajax(
              {
                  type: "POST",
                  url: "/forum/addpost/"+ id +"/"+ therek,
                  data: theString,
                  cache: false,
                  success: function(html)
                  {
    //do what you want to do as success - html is the returning response
    //you can also make this div disappear or display a success message

    }
              });

    });

    });

Answer 3

如果您动态附加整个表单，那么您必须将提交侦听器附加到页面加载时已存在的内容。像这样：

$('body').on('submit', '#newpost', function(event) {
    event.preventDefault();
});

编辑：我可能误解了这个问题。你说的部分无法工作，因为你没有提交“.click”按钮，而是你的“.click”按钮所在的表格。

Answer 4

可能是问题在这里

<div class="submit" align="right">
     <input class="send" value="." title="Send" type="submit">

尝试从class="submit"代码

中删除div

<div align="right">
         <input class="send" value="." title="Send" type="submit">

.submit不会对附加元素

4 个答案: