Question

我有一个需要添加和删除文本框的表单。

我添加了文本框部分。单击加号按钮时，会添加新的文本框 - 没问题。

但是，当我点击垃圾按钮时，我无法删除文本框条目。

有什么想法吗？

这是小提琴 - ＆gt; https://jsfiddle.net/u4h9ohv6/2/

$( '.fcClick' ).on( 'click', function( event ) {
  if( $( this ).attr( 'name' ) == 'fcButtonMinus' ) {
    $( this ).closest( '.input-group' ).find( 'input' ).val('');
    //$( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
    return false;
  }
  if( $( this ).attr( 'name' ) == 'fcButtonPlus' ) {
    $( 'span#fcAdds' ).append(
      '<div class="col-md-10 persStmtPad input-group" style="margin-top:0.125em;margin-left:35px">' +
        '<input id="fallCourses" name="fallCourses[]" type="text" placeholder="additional Fall Course" class="form-control input-md">' +
        '<div class="input-group-btn">' +
          '<button name="fcButtonMinus" class="btn btn-default btn-md" onClick="fcFunc()" style="background-color:#efefef;color:#999;margin-top:12px" title="Delete this Fall Course"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>' +
        '</div>' +
      '</div>'
    );
    return false;
  }
});

function fcFunc() {
  $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
  return false;
}

此外，如果您对如何防止每次点击提交表单有任何想法，那将是非常棒的。现在，即使我有return false存在，每次点击都会提交表单。

以下是我正在尝试的代码：

function fcFunc() {
  $( this ).closest( '.input-group' ).find( 'input' ).val('');
  $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
  //$( this ).closest( "div.input-group" ).focus(); // did not stop form submit
  $( this ).submit( function( event ) {
    event.preventDefault(); // does not stop form from being submitted
  });
  return alert('interception'); // this works
  return false; // this too does not do the trick -- the form still tries to submit
}

Answer 1

this未在该范围内定义。如果您对.bind(this)属性中的函数绑定onclick，则代码将按预期工作。

＆＃13;

$(document.body).on( 'click', '.fcClick', function( event ) {
      if( $( this ).attr( 'name' ) == 'fcButtonMinus' ) {
        $( this ).closest( '.input-group' ).find( 'input' ).val('');
        //$( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
        return false;
      }
      if( $( this ).attr( 'name' ) == 'fcButtonPlus' ) {
        $( 'span#fcAdds' ).append(
          '<div class="col-md-10 persStmtPad input-group" style="margin-top:0.125em;margin-left:35px">' +
            '<input id="fallCourses" name="fallCourses[]" type="text" placeholder="additional Fall Course" class="form-control input-md">' +
            '<div class="input-group-btn">' +
              '<button name="fcButtonMinus" class="btn btn-default btn-md" onClick="fcFunc.bind(this)()" style="background-color:#efefef;color:#999;margin-top:12px" title="Delete this Fall Course"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>' +
            '</div>' +
          '</div>'
        );
        return false;
      }
    });

    function fcFunc() {
      $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
      return false;
    }

＆＃13;

div.hideContentBlock {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-10 persStmtPad input-group" style="margin-top: 1.5em;margin-left:35px">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <input id="fallCourses" name="fallCourses[]" type="text" placeholder="Fall Course" class="form-control input-md" required="" value="testing">
      <div class="input-group-btn">
        <button name="fcButtonMinus" class="btn btn-default btn-md fcClick" style="background-color:#efefef;color:#999;margin-top:12px" title="Erase this Fall Course" value=""><span class="glyphicon glyphicon-erase" aria-hidden="true"></span></button>
        <button name="fcButtonPlus" class="btn btn-default btn-md fcClick" style="background-color:#efefef;color:#999;margin-top:12px" title="Add another Fall Course" value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
      </div>
    </div><!-- end input-group -->

    <span id="fcAdds"></span>

＆＃13;

Answer 2

正如@nurdyguy所说，由于您动态创建元素，这是一个问题。我在代码中更改了一些内容以使其工作并进行快速演示。这是一个工作小提琴：https://jsfiddle.net/u4h9ohv6/8/。

我首先将test类添加到您要创建的元素中：

<button name="fcButtonMinus" class="test btn btn-default btn-md"...</button>

最大的变化是抛弃了这个功能并使用了这样的东西：

$(document).on('click', '.test', function() {
   $( this ).closest( "div.input-group" ).addClass( "hideContentBlock" );
   return false;
});

这是一个粗略的轮廓，但希望能帮助你找到正确的方向=）

Answer 3

检查

    $( document ).on( 'click','.fcClick', function( event ) {

  if( $( this ).attr( 'name' ) == 'fcButtonMinus' ) {
  $(this).parent().parent().remove();

    return false;
  }

如何在jQuery

3 个答案: