Question

在编写此程序时，此站点非常有用。不幸的是，我在某个时候遇到了麻烦，并且已经把这个问题熬了很久了。此时，我正在查看三个文件，一个包含表单的.html，包含我的事件处理程序的.js，以及一个接收我的post变量并包含表单新内容的.php。

我从初始文本输入中获取发布数据就好了。新表单内容按我的预期设置。但是，在将此表单内容设置为带有按钮类的类型按钮的新输入之后，我的按钮类处理程序中的post方法不会像我期望的那样在login.php上设置post数据。

这是我的代码：

interface.html页面的内容：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="interface" action="login.php" method="post">
<input type="text" value="enter username here" name="user"/>
<button id="submit">submit</button>
</form>
<script src='events.js'></script>
</body>
</html>

events.js文件的内容：

$("#submit").click(function(){
  $.post(
    $("#interface").attr("action"),
    $(":input").serialize(),
    function(info){$("#interface").html(info);}
  );
}); 
$(".button").click(function(){
  var $this=$(this);
  $.post(
    $("#interface").attr("action"),
    {data:$this.val()},
    function(info){$("#interface").html(info);}
  );
}); 
$("#interface").submit(function(){
  return false;
});

login.php文件的内容：

<?php
if(isset($_POST['user'])){
  echo '<input type="button" class="button" value="set data"/>';
}else if(isset($_POST['data'])){
  echo 'data is set';
}
?>

Answer 1

您需要等到该按钮存在才能将事件绑定到该按钮。另外，我会从点击切换到提交并完全放弃.button上的点击事件绑定。

//$("#submit").click(function () {
$("#interface").submit(function (e) {
    e.preventDefault();
    var $form = $(this), data = $form.serialize();
    if ($form.find(".button").length && $form.find(".button").val() ) {
        data = {data: $form.find(".button").val()};
    }
    $.post($form.attr("action"), data, function (info) {
        $form.html(info);
    });
});

//$("#interface").submit(function () {
//    return false;
//});

由于表单未被替换，并且事件在表单上，因此您不再需要重新绑定任何内容。

在类选择的按钮上使用jQuery post方法设置未发布的数据

1 个答案: