Question

我有一个简单的表单，我正在尝试应用我的自定义函数：

$(document).ready(function(){

    $("#async_form").asyncpost(defaultAjaxCallback);

});

$.fn.asyncpost = function(callback)
{

var url = $(this).attr('action');
var btn = $(this).children('input[type=submit]');
var data = $(this).serialize();

$(this).on('click', btn, function(){

    event.preventDefault();
    $.post(url, data, callback);

});

}

我想动态获取表单的children.btn并在点击时检测。这是有效的，但问题是，无论何时在表单上点击都会触发点击。我在这里缺少什么？

Answer 1

检查事件的当前目标和目标属性。

e.currentTarget将返回您点击过的元素。
e.target将返回附加事件的元素。

想法是检查当前目标不应该等于事件目标。

您的代码将被修改为： -

    $.fn.asyncpost = function(callback)
{

var url = $(this).attr('action');
var btn = $(this).children('input[type=submit]');
var data = $(this).serialize();

$(this).on('click', btn, function(e){
    if(e.currentTarget != e.target){
       event.preventDefault();
       $.post(url, data, callback);
    }
});

}

您也可以这样做： -

$(this).on('click', 'input[type=submit]', function(e){
    event.preventDefault();
    $.post(url, data, callback);
});

＆＃13;

var btn = $("#frm").children('input[type=submit]');
$("#frm").on("click",btn,function(e){
  if(e.currentTarget != e.target){
    e.preventDefault();
    console.log(e.target);
  }
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm">
  <input type="submit"/>
</form>

＆＃13;

Answer 2

当前的问题是$.on takes a string in its selector parameter, not a jQuery object。您还需要将event传递到您的单击处理程序，并在单击处理程序而不是就绪处理程序中获取序列化表单数据。

$(document).ready(function () {
  $("#async_form").asyncpost(null);
});

$.fn.asyncpost = function (callback) {
  var url = $(this).attr('action');

  $(this).on('click', 'input[type=submit]', event => {
    event.preventDefault();
    var data = $(this).serialize();
    console.log(url, data, callback);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="async_form" action="post.php" method="POST">
  <input name="text">
  <input name="checkbox" type="checkbox">
  <input type="submit">
</form>

点击绑定以形成子按钮

2 个答案: