Question

当我使用jQuery .after()函数添加字段时，显示/隐藏功能对这些字段不起作用。

这是一个证明这个问题的JSFiddle：

显示/隐藏功能适用于第一行，但不适用于在该行之后添加的任何行。我认为在页面加载后编写的代码可能是个问题，但我不确定。如果是这种情况，除了硬编码一定数量的行之外还有其他工作吗？

以下是与我合作的代码：

CSS：

#Table {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse:collapse;
}
#Table td, #Table th {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
}
#Table th {
    font-size:1.4em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#fff;
}
#Table tr.alt td {
    color:#000;
    background-color:#EAF2D3;
}

HTML：

<table style="width: 70%" id="Table" name="Table">
    <tr>
        <th>#</th>
        <th>Cause</th>
    </tr>
    <tr>
        <td>1</td>
        <td>
            <select name='report_cause2' id='report_cause2' class="report_cause">
                <option value='default'>-</option>
                <option value='other'>Other, Not Listed</option>
            </select>
            <p class="cause_details">
                <input type="text" name="cause_detail_info" id="cause_detail_info" placeholder="Type cause here" size="48" maxlength="50" class="textbox required" value="" />
            </p>
        </td>
    </tr>
</table>
<input type="button" id="btnAdd" name="btnAdd" value="Add More" class="button" />

jQuery的：

var count_2 = 5;
var table_count2 = 1;

$(document).ready(function () {

    $('.cause_details').hide();
    $('.report_cause').change(function () {

        if ($(this).val() == 'other') {
            $(this).parent().find('.cause_details').show();
        } else {
            $(this).parent().find('.cause_details').hide();
        }

    });

    $('#btnAdd').click(function () {
        count_2 = count_2 + 2;
        table_count2 = table_count2 + 1;
        $('#Table tr:last').after('<tr><td>' + table_count2 + '</td>' +
            '<td>' +
            '<select name=\"report_cause' + count_2 + '\" id=\"report_cause' + count_2 + '\" class=\"report_cause\">' +
            '<option value=\'default\'>-</option>' +
            '<option value=\'other\'>Other, Not Listed</option>' +
            '</select>' +
            '<p class=\"cause_details\">' +
            '<input type=\"text\" name=\"cause_detail_info' + count_2 + '\" id=\"cause_detail_info' + count_2 + '\" placeholder=\"Type cause here\" size=\"48\" maxlength=\"50\" class=\"textbox required\" value=\"\" />' +
            '</p>' +
            '</td></tr>');
    });
});

Answer 1

此：

$('.report_cause').change(function () {

仅适用于调用时存在的.report_cause元素。要处理新元素，您需要一个委托处理程序：

$(document).on('change', '.report_cause', function(){

此外，如果您希望最初隐藏新元素，请相应地修改输出HTML：

'<p class=\"cause_details\" style=\"display:none\">'+

＆＃13;

var count_2 = 5;
var table_count2 = 1;

$(document).ready(function() {

  $('.cause_details').hide();
  $(document).on('change', '.report_cause', function() {

    if ($(this).val() == 'other') {
      $(this).parent().find('.cause_details').show();
    } else {
      $(this).parent().find('.cause_details').hide();
    }

  });

  $('#btnAdd').click(function() {
    count_2 = count_2 + 2;
    table_count2 = table_count2 + 1;
    $('#Table tr:last').after('<tr><td>' + table_count2 + '</td>' +
      '<td>' +
      '<select name=\"report_cause' + count_2 + '\" id=\"report_cause' + count_2 + '\" class=\"report_cause\">' +
      '<option value=\'default\'>-</option>' +
      '<option value=\'other\'>Other, Not Listed</option>' +
      '</select>' +
      '<p class=\"cause_details\" style=\"display:none\">' +
      '<input type=\"text\" name=\"cause_detail_info' + count_2 + '\" id=\"cause_detail_info' + count_2 + '\" placeholder=\"Type cause here\" size=\"48\" maxlength=\"50\" class=\"textbox required\" value=\"\" />' +
      '</p>' +
      '</td></tr>');
  });
});

＆＃13;

#Table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
}
#Table td,
#Table th {
  font-size: 1em;
  border: 1px solid #98bf21;
  padding: 3px 7px 2px 7px;
}
#Table th {
  font-size: 1.4em;
  text-align: left;
  padding-top: 5px;
  padding-bottom: 4px;
  background-color: #A7C942;
  color: #fff;
}
#Table tr.alt td {
  color: #000;
  background-color: #EAF2D3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width: 70%" id="Table" name="Table">
  <tr>
    <th>#</th>
    <th>Cause</th>
  </tr>
  <tr>
    <td>1</td>
    <td>
      <select name='report_cause2' id='report_cause2' class="report_cause">
        <option value='default'>-</option>
        <option value='other'>Other, Not Listed</option>
      </select>
      <p class="cause_details">
        <input type="text" name="cause_detail_info" id="cause_detail_info" placeholder="Type cause here" size="48" maxlength="50" class="textbox required" value="" />
      </p>
    </td>
  </tr>
</table>
<input type="button" id="btnAdd" name="btnAdd" value="Add More" class="button" />

＆＃13;

Answer 2

试试这个。问题是，当您创建动态元素时，需要再次在$('.report_cause')上注册更改事件。

$(document).ready(function(){

    $('.cause_details').hide();

    BindChange();

    $('#btnAdd').click(function(){
        count_2 = count_2 + 2;
        table_count2 = table_count2 + 1;
        $('#Table tr:last').after('<tr><td>'+table_count2+'</td>'+
        '<td>'+
            '<select name=\"report_cause'+count_2+'\" id=\"report_cause'+count_2+'\" class=\"report_cause\">'+
                '<option value=\'default\'>-</option>'+
                '<option value=\'other\'>Other, Not Listed</option>'+
            '</select>'+
            '<p class=\"cause_details\">'+
                '<input type=\"text\" name=\"cause_detail_info'+count_2+'\" id=\"cause_detail_info'+count_2+'\" placeholder=\"Type cause here\" size=\"48\" maxlength=\"50\" class=\"textbox required\" value=\"\" />'+
            '</p>'+
        '</td></tr>');

        BindChange();
    });
});

function BindChange()
{
    $('.report_cause').bind("change",function(){

    if ($(this).val() == 'other'){
    $(this).parent().find('.cause_details').show();
        }else{
    $(this).parent().find('.cause_details').hide();
        }

    });
}

https://jsfiddle.net/hnj6ed1y/12/

Answer 3

当您动态创建元素时，您需要使用事件委派来处理它们上的事件，因此根据您的jQuery版本使用tableView或.bind API。

只需将代码更改为：

.on

使用.after（）函数添加字段时显示/隐藏不起作用

3 个答案: