Question

我尝试使用jQuery动态创建和删除表行。虽然它的添加行部分正常工作，但删除行并不是因为onclick事件正在附加到动态创建的按钮上。我该如何解决这个问题？

<table border="1" id="applicanttable">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>

            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row_0">
            <td><input id="firstName0" name="firstName0" type="text" /></td>
            <td><input id="lastName0" name="lastName0" type="text" value=""/></td>
            <td><input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove"/></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;"><button type="button" id="addrow">Add Row</button></td>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">

    var rowIndex = 0;

    $("#addrow").on('click', function() {

        rowIndex++;

        var newRow = '<tr><td><input id="firstName' + rowIndex + '" name="firstName' +
            rowIndex + '" type="text" /></td>"' + '<td><input id="lastName' + rowIndex +
            '" name="lastName' + rowIndex + '" type="text" /></td>"' +
            '<td><input type="button" class="removerow" id="removerow' +
            rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

        $("#applicanttable > tbody > tr:last").after(newRow);               

    });

    $(".removerow").on('click', function() {
        alert("hello");
    });

</script>

Answer 1

您必须创建一个＆＃34; $(document).on('click','.removerow',function(){ //do alert here });＆＃34;使用on()进行绑定。

$("#applicanttable").on('click','.removerow',function(){
//do alert here 
});

或您可以使用非动态父

function removeRow(thisObj){
}

或者您可以创建一个功能

onclick="removeRow(this)"

并放置ssh

Answer 2

使用jQuery而不是字符串创建元素，您可以立即附加事件处理程序，这是带按钮的示例，其余元素可以以相同的方式创建

        final Switch o = (Switch)findViewById(R.id.obamaswitch);
    if (o.isChecked()){
        o.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                ImageView p = (ImageView)findViewById(R.id.obamahere);
                p.???;
            }
        });

Answer 3

注意，在</tr>处遗漏了newRow。尝试使用选择器click将document事件委派给[class^=removerow]，以选择以class开头的"removerow"元素。另请尝试调整#addRow click事件以包含if条件，以检查#applicanttable > tbody > tr中是否存在DOM;如果没有将newRow追加到#applicanttable > tbody

var rowIndex = 0;

$("#addrow").on('click', function() {

  rowIndex++;

  var newRow = '<tr><td><input id="firstName' + rowIndex + '" name="firstName' + rowIndex + '" type="text" /></td>"' +
    '<td><input id="lastName' + rowIndex + '" name="lastName' + rowIndex + '" type="text" /></td>"' +
    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td></tr>';

  if ($("#applicanttable > tbody > tr").is("*"))
    $("#applicanttable > tbody > tr:last").after(newRow)
  else $("#applicanttable > tbody").append(newRow)


});

$(document).on('click', "[class^=removerow]", function() {

  $(this).parents("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table border="1" id="applicanttable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>

      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row_0">
      <td>
        <input id="firstName0" name="firstName0" type="text" />
      </td>
      <td>
        <input id="lastName0" name="lastName0" type="text" value="" />
      </td>
      <td>
        <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <button type="button" id="addrow">Add Row</button>
      </td>
    </tr>
  </tfoot>
</table>

Answer 4

我将选择器.removerow作为on事件侦听器的第二个参数，以便它附加到动态元素。

$(document).on('click', '.removerow', function() {
  $(this).parents('tr').remove();
});

您可以测试fiddle here

使用Jquery创建新表行，并将具有动态id的按钮添加到表格单元格

4 个答案: