Question

$.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 + "<input type='submit' class='delete' value='Delete' onClick='deleterecord(" + data[i].id + ");'><br>"

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

            // when delete button is clicked.
            //$(".delete").click(){
            function deleterecord(id) {
                    alert("sjrg")
                    $.ajax({
                        url: "ajs/",
                        type: "DELETE",
                        data: "22",
                        dataType: "html",
                        success: function (data) {
                            alert("success")
                        },
                        error: function () {
                            alert("error")
                        }
                    }); // delete  ajax() closed

                } //delete click() closed
        } //success function closed
}); //ajax call closed

我使用.ajax方法显示了JSON响应数据，并为每行添加了删除按钮。

现在，当我点击该按钮时，我需要调用deleterecord（id）函数，但它没有调用它。当我使用代码$(".delete").click(function())时它正在工作，但我需要onclick事件，以便我可以在ajax中的数据中使用该id。

我无法理解出了什么问题

Answer 1

问题是因为deleterecord()功能不在点击input引发的事件范围内。

在这种情况下，更好的模式是使用委托事件。我可以看到你尝试了这个，但评论了它。要传递要删除的特定记录的id，请在附加的data-*中添加input属性：

$.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 + '<input type="button" class="delete" value="Delete" data-id="' + data[i].id + '"><br>';
        }
        $("#result").html(output); 
    }
});

// delegated delete event
$("#result").on('click','.delete', function() {
    var id = $(this).data('id'); // use this in the AJAX call as required
    $.ajax({
        url: "ajs/",
        type: "DELETE", 
        data: "22",     
        dataType: "html",
        success: function(data) { 
            alert("success")
        },
        error: function(){
            alert("error")
        }
    });
}

另请注意，我将type的{{1}}从input更改为submit，因为每个表单只允许使用1个提交元素。

Answer 2

尝试这个伴侣，

$(document).on('click','.delete', function(){
    // do what you want
});

有些时候，自DOM构建以来它没有被解雇..

Answer 3

使用AJAX成功函数

中的删除功能重写代码

 $.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+"<input type='submit' class='delete' value='Delete' onClick='deleterecord("+data[i].id+");'><br>"

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


   }   //success function closed
   });  //ajax call closed

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

           }//delete click() closed

因此，您可以通过单击按钮调用此功能。还有一件事你仍然想要一个提交按钮，而你可以有一个简单的按钮类型。希望这会有所帮助...

提交按钮onclick（）事件未触发

3 个答案: