Question

我正在使用JSP，JQUERY，AJAX，MYSQL和Servlet开发Web应用程序项目。我有table.jsp如下：

<form id="frm_table">
        Username : <input type="text" id="txt_name" name="txt_name">
        <a href="" id="a_details">Bring Details</a>
        <br>            
        <table id="importTable">

        </table>
    </form>

您在文本框中输入一个名称，然后点击链接'带来详细信息'以在数据库中搜索（MYSQL）类似名称并将其返回到表格中（例如，Neha将带来 - 'Neha'，'Nehal'，'Sneha' ，'Snehal'等）。每个表格行都有一个复选框。 AJAX调用看起来像这样（fetchTable.js）：

$('#a_details').click(function (e) {
    e.preventDefault();
    var name = $.trim($('#txt_name').val());
    $.ajax({
        url: "tableservlet",
        data: {txt_name: name,
        //dataType: 'json',
        error: function () {
            alert("Error Occured");
        },
        success: function (data) {
            $('#importTable').empty();
            var str = '<tr><td></td><td>Name</td><td>Username</td><td>Project</td></tr>';
            $.each(data.details, function () {
                str += '<tr><td><input type="checkbox" id=' + this['uname'] + ' value=' + this['uname'] + '></td>';
                str += '<td>' + this['fname'] + '</td>';
                str += '<td>' + this['lname'] + '</td>';
                str += '<td>' + this['uname'] + '</td></tr>';
            });
            $('#importTable').append(str);
        }
    });
});

这成功地为table.jsp页面上的每一行带来了复选框。在选中复选框时，我必须填充下拉列表，该列表将包含分配给所选用户名的项目。为此，我需要选中复选框的id属性值。

问题是我无法将所选复选框的ID提取到我的javascript文件（fetchTable.js）中。如果没有此ID，我无法填充下拉列表。

请帮助.....提前谢谢!!!

Answer 1

解决方案：复选框更改的侦听器必须位于AJAX请求的回调中（success：function（data）{}称为AJAX请求的回调。）

做类似的事情：

success: function (data) {
  $('#importTable').empty();
  var str = '<tr><td></td><td>Name</td><td>Username</td>td>Project</td></tr>';
  $.each(data.details, function () {
    str += '<tr><td><input type="checkbox" id=' + this['uname'] + ' value=' + this['uname'] + '></td>';
    str += '<td>' + this['fname'] + '</td>';
    str += '<td>' + this['lname'] + '</td>';
    str += '<td>' + this['uname'] + '</td></tr>';
  });
  $('#importTable').append(str);
  ListenCheckboxChange();
}

然后：

function ListenCheckboxChange(){
   // set event listeners for checkbox change
}

Answer 2

您可以在jquery的.on方法

上获得动态附加复选框值

＆＃13;

$( "input[type=checkbox]" ).on( "change", function(){

 //you can get value from here     

   alert($(this).attr('id'));

});

＆＃13;

从jquery AJAX的成功函数中获取checkbox id和value属性

2 个答案: