Question

我遇到了使用正确的处理程序让ajax更新数据的问题

这就是我的'提交'表单，附加输入字段和提交按钮的方式：

var ctrno='';
var refno='';
$('#containers').delegate("a.edit","click", function(e) {
  ctrno = $(this).closest("td").attr("data-id");
  refno = $(this).closest("td").siblings().attr("data-refno");
  var html = "<div class='editctrno'><input type='hidden' class='ctr' id='refid' name='refid' value='"+refno+"'>" +
        "<input name='ctrno' class='ctr' id='ctrno' class='btn btn-primary' type='text' value='"+ctrno+"'>" +
        "<p><input id='ctrsubmit' type='button' value='Update'> <a href='#' class='canceledit btn btn-default'>Cancel</a></p></div>";
$(this).closest("td").html(html);

$('#containers').delegate("a.canceledit", "click", function() {
    var curctrno = $(this).closest("td").attr("data-id");
    $(this).closest(".editctrno").html("<a class='edit'>"+curctrno+"</a>");
});
});

这是我的 ajax电话：

$('#ctrsubmit').click(function() {
  var meikorefno = $('input#refid').val();
  var ctrnum = $('input#ctrno').val();
  $.ajax({
    type: "POST",
    url: "/containers",     
    data: {'refid' : refno, 'ctrno' : ctrnum },
    success: function(result) {
        console.log("success!");
    }
  });
});

“更新”按钮没有任何结果。我试过.submit（）无济于事。在我使用表单格式之前：<form method='post' id='editctrno'>....</form>但是只要我放置一个e.preventDefault();对象，它就会刷新页面。我究竟做错了什么？

JS小提琴：http://jsfiddle.net/727dapyx/3/

Answer 1

您的$('#ctrsubmit').click()不适用于实时更新的html代码。你必须使用.on处理程序：

$(document).on('click', '#ctrsubmit', function(e){});

更新

你在JSFiddle中使用了.on处理程序错误：

更改：

$("#ctrsubmit").on("click", function(e) {});

到

$(document).on("click", "#ctrsubmit", function(e) {});

工作JSFiddle

Ajax更新数据而不刷新到另一个页面

1 个答案:

更新