如何正确处理点击事件,按钮的事件没有't显示警报

How to properly handle Onclick event, event for a button doesn't show alert.

本文关键字:事件 显示 正确处理 按钮      更新时间:2023-09-26

我正在尝试按钮的Onclick事件,但它没有显示警报。有人能建议我如何正确处理点击事件吗。

function sendGetData () {   
    $.ajax({
         type: 'GET',
         url: 'Refresh',
         success: function (data) {
             var trHTML = '';
             $.each(data, function (i, item) {
                 if(data[i].test_progress=="Complete")
                     {
           var buttonVar = ('<button id="btn11">'+"Clicking"+'</button>');                   
                    $("#btn11").click(function(){
                                    alert("The paragraph was not clicked."+i);
                                });
                     }
                 else
                     {
                    var buttonVar = ('<button   id="btn12">'+"Stoping"+'</button>');
                    $("#btn12").click(function(){
                                    alert("The paragraph was not clicked."+i);
                                });
                     }
                 trHTML += '<tr><td>' + data[i].test_type + 
                 '</td><td>' + data[i].device_id + 
                 '</td><td>' + data[i].make + '&nbsp'+data[i].model+
                 '</td><td>' + data[i].stack_name +
                 '</td><td>' + data[i].suite_name + 
                 '</td><td>' + data[i].test_progress + '<br>&nbsp&nbsp&nbsp&nbsp'+data[i].tests_run+'/'+data[i].total_tests+
                 '</td><td>' + data[i].start_time + 
                 '</td><td>' + data[i].end_time +
                 '</td><td>' + buttonVar +
                 '</td></tr>';
                });
             $('#test1').append(trHTML);
             $('#test').hide();
             $('#show').show();       
         }
     });
    }

尝试使用此方法

$(document).on('click', '#btn12', function(event) {
 alert("The paragraph was not clicked."+i);
});

在将元素添加到DOM之前,将添加click事件的侦听器。这行不通。

var trHTML = '';
trHTML += '<tr><td>' + data[i].test_type + 
'</td><td>' + data[i].device_id + 
'</td><td>' + data[i].make + '&nbsp'+data[i].model+
'</td><td>' + data[i].stack_name +
'</td><td>' + data[i].suite_name + 
'</td><td>' + data[i].test_progress + '<br>&nbsp&nbsp&nbsp&nbsp'+data[i].tests_run+'/'+data[i].total_tests+
'</td><td>' + data[i].start_time + 
'</td><td>' + data[i].end_time +
'</td><td>' + buttonVar +
'</td></tr>';
$('#test1').append(trHTML);
$.each(data, function (i, item) {
   if(data[i].test_progress=="Complete")
   {
     var buttonVar = ('<button id="btn11">'+"Clicking"+'</button>');                   
     $("#btn11").click(function(){
        alert("The paragraph was not clicked."+i);
    });
 }
 else
 {
    var buttonVar = ('<button   id="btn12">'+"Stoping"+'</button>');
    $("#btn12").click(function(){
        alert("The paragraph was not clicked."+i);
    });
}

您只能将单击事件分配给DOM中已经存在的元素。$('#test1').append(trHTML); 之后