如何在按钮单击时调用函数，其中按钮位于.ajax的成功方法中

Question

我有 .ajax() 方法，我成功地从它那里获得了每条记录的 json 响应，我需要添加一个按钮，当我们点击它应该调用另一个函数我该怎么做。

$.ajax({
url: "ajs/index",
type: "GET",
dataType: "JSON",
success: function(data) {  
  var output=""
      for(i=0;i<data.length;i++)
    {
           output += "name" + data[i].name
                  + "title: " + data[i].title
                  + "content: " + data[i].content
                  + "<input type='submit' class='delete' value='Delete' onclick='deleterecord("+data[i].id+");'><br>"


    }
     $("#result").html(output);
     $('#result').on('click', '.delete', deleterecord(id){
       alert("test")
       $.ajax({
                    url: "ajs/",
                    type: "DELETE", 
                    data: "22",     
                    dataType: "html",
                    success:function(data) { 
                        alert("success")
                    },
                    error: function(){
                        alert("error")
                    }
                });
   }   //success function closed
 });

因此，当我单击处于成功功能的删除按钮时，我需要调用另一个函数。我在 ajax 调用按钮之外创建了一个函数“删除记录（）”，它没有响应。任何人都可以帮助我。

Answer 1

首先，您需要在要向output 中添加数据的行的末尾添加一个分号;。

我会使用一个类来引用点击处理程序，而不是将 onclick 事件绑定到每个元素。您还 不能在 HTML 中复制 ID，这可能会给您带来问题。同样，在这里使用类。

最后，由于每次迭代数组时都会连接数组的结果，因此应该在循环之后而不是在循环内部设置 #result 的 HTML。它最终会看起来一样，但最终会出现大量无用的调用，只会减慢处理时间。

试试这个：

var output = '';

for(i = 0; i < data.length; i++) {
    output += "name" + data[i].name
           + "title: " + data[i].title
           + "content: " + data[i].content
           + "<input type='submit' class='delete' value='Delete'><br>";
}

$("#result").html(output);

然后使用delegated approach 而不是直接定义您的点击处理程序：

$('#result').on('click', '.delete', deleterecord);

• 为了解释上面发生的情况，您正在侦听源自#result 元素内部的点击，并且发生在具有删除类的元素上，当它们发生时您调用deleterecord()。此方法侦听 DOM 的原始创建，其中直接事件不需要并且每次创建新元素时都需要重新绑定。 click() 是一个很好的直接事件示例，live('click', function() {}) 是一个已弃用的委托事件示例。

我认为在您的 deleterecord() 函数中您正在正确处理此处理，因为您使用多个提交按钮，您应该返回 false 或使用 preventDefault() 等来停止正常提交表单。如果您还没有考虑，请考虑一下...如果这不是您的意思，请更改 <button type="button" class="delete">Delete</button> 的输入，默认情况下不会将您的浏览器发送到任何地方。