提交按钮onclick()事件没有触发

$.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

I have displayed JSON response data using .ajax method and I added delete button for each row.

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

Now when I click that button I need to call deleterecord(id) function, but it is not calling it. When I use the code $(".delete").click(function()) it is working but I need onclick event so that I can use that id in my data in ajax.

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

I couldn't understand what went wrong

我不明白出了什么事

3 个解决方案

#1

The issue is because the deleterecord() function is not in the scope of the event raised by the click of the input.

问题在于，deleterecord()函数不在通过单击输入引发的事件范围内。

A better pattern in this case is to use a delegated event. I can see you attempted this but commented it out. To pass the id of the specific record to delete, add a data-* attribute to the appended input:

在这种情况下，更好的模式是使用委托事件。我可以看到你尝试过，但是把它注释掉了。要传递要删除的特定记录的id，在附加的输入中添加一个data-*属性:

$.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")
        }
    });
}

Note also that I changed the type of input from submit to button, as only 1 submit element is allowed per form.

还要注意，我将输入类型从submit更改为button，因为每个表单只允许有一个submit元素。

#2

try this mate,

试试这个伴侣,

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

Some time its not firing since its build after DOM ..

有一段时间它在DOM之后的构建中没有被触发。

#3

Re-write your code with the delete function out of AJAX success function,

用AJAX成功函数的delete函数重新编写代码，

 $.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

So you can call this function from your button click. And one more thing do you still want a Submit button instead you can have a simple button type. Hope this helps...

你可以通过点击按钮来调用这个函数。还有一件事你还想要提交按钮，你可以有一个简单的按钮类型。希望这有助于……

#1