Question

我使用搜索按钮在服务器端创建表单动态，并使用Jquery语法返回它。在我填写表单并单击提交按钮后，还有另一个.submit（）Jquery函数，假设在将数据发送到服务器之前调用输入以验证输入。但是，由于某种原因，永远不会调用此函数，并且会发送数据请求。更多细节：

这是serach按钮在服务器端动态创建的表单，并使用Jquery“打印”到html页面：

<form action=... name="stockbuyform" class="stockbuyform" method="post">
<input type=text value="Insert purchasing amount">
<input type="submit" value="Click to purchase">
</form>

这是.submit（）函数：

$(".stockbuyform").submit(function() {
    alert("Need to validate purchasing details");
}

但是，如果我点击购买按钮，则永远不会调用.submit（）函数。这是否意味着我不能在第一次通话中使用另一个Jquery调用？

Answer 1

使用事件委派（live或delegate）。 live可能最适合这种情况：

$(".stockbuyform").live("submit", function() { 
    alert("Need to validate purchasing details"); 
});

现场的作用（来自manual）：

为所有人附加一个处理程序与当前相匹配的元素选择器，现在或将来。

因此您不必担心失去绑定事件处理程序的ajax替换元素。另外，请确保从提交处理程序返回false，以防止发生非XHR GET / POST。

Answer 2

我认为搜索是一个AJAX请求。在AJAX完成后，您需要绑定表单提交操作：

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    $('#target').submit(function() {
      alert('Handler for .submit() called.');
      return false;
    });
  }
});

使用.live（）http://api.jquery.com/live/：

可以将某些事件绑定到当前和未来的元素

$('.button').live('click', function() {
  // do something.
});

.live（）确实有一些限制（参见链接文档）：

它不适用于原生DOM 元素所以$（'table'）。live（'click'，功能（）{}）;不会起作用。
它不能被束缚 $（ 'somediv '）。next（）的。生活（' 点击'，功能（）{}）;不会起作用。

.delegate()方法应该可以缓解这些限制，但我知道它有自己的局限性。我实际上还没有用过这个......不需要。来自文档：

代表是使用的替代方案 .live（）方法，允许每个事件委托的绑定特定的DOM元素。

您还可以在JQuery中的AJAX成功/错误/完成函数中绑定新事件：

$.ajax({
  url: 'something.html',
  success: function(data) {
    //add new elements with data.
    //bind new events to elements
  }
});

动态创建表单

2 个答案: