Jquery : 버튼 만들기, 이벤트 처리기, 문제

Question

자바 스크립트 나 Jquery를 사용한 이후로 오랫동안 사용 해왔다. 그래서 나는 어리석은 실수를 저질렀다고 확신하지만, 내가 잘못한 것을 알아낼 수 없다. . 내 JS 함수 중 하나는 페이지가로드 될 때 실행되는 것처럼 보이지만 버튼을 클릭 할 때 필요하지는 않습니다.

데이터베이스에서 정보를 가져 오려고합니다. 나는 PHP로 작성된 API를 테스트하려고 시도하고 있으므로 "테스트"페이지를 만들었습니다. 페이지에 다른 데이터 필드가 있지만 모두 정상적으로 작동합니다. 이벤트 핸들러

는 "document.ready"기능

$(document).ready(function(){ 
    $("#show_users").click(ShowUsers); 
    $(".log_btn").click(ShowBSLogs(this.id)); 
}); 

의 HTML에서 단일 버튼 제 : I 3 개 기능 지금 페이지에 대해 JS 파일을 만들었 동적으로 생성 된 버튼 집합에 대한 두 번째 매개 변수입니다. 이러한 이벤트의 각각 다른 두 기능 중 하나 트리거해야

:

function ShowUsers() { 
    $.post("show", function(data,status){ 
     console.log(data[0]); 
     $("#output").empty().append("<table id='user_table' width='100' border-color='black'><tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Logs</th></tr></table>"); 
     data.forEach(function(user) { 
      $("#user_table").append("<tr><td>" + user.first_name + "</td><td> " + user.last_name + "</td><td> " + user.email + "</td><td><button class='log_btn' id=' "+user.u_id+" '>Logs</button></td></tr>"); 
     }); 

    }); 
} 

및

function ShowBSLogs(u_id) { 
    $.post("show/uid", {id: u_id}, function(data,status){ 
     console.log(data); 
     console.log("fired"); 
    }); 
} 

페이지가로드, ShowBSLogs가 호출

, 그리고 이후는 전달되지 않는 변수가 있으면 오류가 발생합니다. 원래 버튼을 클릭하고 ShowUsers가 호출되면 정상적으로 실행되고 이름, 전자 메일 및 사용자와 연결된 ID가있는 표가 표시됩니다. 그러나 해당 단추를 클릭하면 ShowBSLogs isn 전화하지 않았어.

다른 파일에서 더 많은 코드를 게시하게되어 기쁩니다. 그러나 여기에 오류가 있다는 것이 확실합니다. 네가 필요한 것이 있으면 알려줘.

누구나? 미리 감사드립니다.

Answer 1

단추 개체를 만든 다음 테이블 행에 추가하여이 문제를 해결하려면 이벤트 처리기 (.click)를 설정해야합니다. 나는이 궁극적 인 해결책에 많은 다른 변이를 시도하고 아무도 일한 이후로 이것이 왜 작동하는지 모르겠다. 그러나 나는 다른 사람들을 돕기 위해 나의 해결책을 게시하고있다.

test.js : 하나는 전에 2 분 질문으로

$(document).ready(function(){ 
    $("#show_users").click(function() { ShowUsers();   }); 
    $(".log_btn" ).click(function() { ShowBSLogs(this.id); }); 
}); 


function ShowUsers() { 
    $.post("show", function(data,status){ 
     console.log(data[0]); 
     $("#output").empty().append("<table id='user_table' width='100' border-color='black'><tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Logs</th></tr></table>"); 
     data.forEach(function(user) { 
      var row = $(" <tr><td>" + user.first_name + "</td><td> " + user.last_name + "</td><td> " + user.email + "</td></tr>"); 
      var button = $('<button/>', { 
       text: 'Logs', 
       class: 'log_btn', 
       id: user.u_id }); 
      row.append(button); 
      $("#user_table").append(row); 
     }); 
     $(".log_btn").click(function() { ShowBSLogs(this.id); }); //set event handler 

    }); 
} 


function ShowBSLogs(u_id) { 
    console.log(u_id); 
    $.post("show/uid", {id: u_id}, function(data,status){ 
     console.log(data); 
     console.log("fired"); 
    }); 
}