Question

创建了 动态列表 字段，该字段具有切换功能。但切换仅适用于第一个字段，而不是其余动态创建的列表

<html>
  <head>
    <title>add / remove textbox</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
      div{
        padding:8px;
      }
    </style>

    <style>
      #toggle-view {
        list-style: none;
        font-family: arial;
        font-size: 11px;
        margin: 0;
        padding: 0;
        width: 300px;
      }

      #toggle-view li {
        margin: 10px;
        border:1px solid #ccc; 
        padding:4px 3px; 
        position: relative;
        cursor: pointer;
      }

      #toggle-view h3 {
        margin: 0;
        font-size: 14px;
      }

      #toggle-view span{
        position: absolute;
        right: 5px;
        top: 0;
        color: #ccc; 
        font-size: 13px;
      }
      #toggle-view dd {
        margin: 5px 0;
        display: none;
      } 
    </style>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = $(function() {
        var counter = 2;
        $("#addButton").click(function () {
          var newTextBoxDiv = $(document.createElement('li'))
            .attr("id", 'TextBoxDiv' + counter);

          newTextBoxDiv.after().html('<h3>Page No#'+counter+'</h3><dd>' +
          '<input type="text" name="textbox' + counter +
          '" id="textbox' + counter + '" value=""  /></dd>');

          newTextBoxDiv.appendTo("#toggle-view");
          counter++;
        });

        $("#removeButton").click(function () {
          if(counter==1){
            alert("No more textbox to remove");
            return false;
          }

          counter--;
          $("#TextBoxDiv" + counter).remove();
        });


  var parent = $('#toggle-view'), // storing main ul for use below
  delay = 200; // storing delay for easier configuration

// bind the click to all headers 'li h3', parent
$('#toggle-view li').on( 'click', function( event ) {

    //console.log( 'clicked', $( this ).text() );

    // get the li that this header belongs to
    var li = $(this).closest('li');

    // check to see if this li is not already being displayed
    if (!$('dd', li).is(':visible'))
    {
        // loop on all the li elements
        $('li', parent).each(function() {
           //alert();
            // slide up the element and set it's marker to '+' 
            $('dd', $(this)).slideUp(delay);
            //$('dd', $(this)).text('+');
        });

        // display the current li with a '-' marker
        $('dd', li).slideDown(delay);
        //$('dd', li).text('-');
    }
});
  //}
    //setTimeout(togg, 100);    

  });



</script>
</head><body>

<div id='TextBoxesGroup'>
  <ul id="toggle-view">

    <li id="TextBoxDiv1" >
        <h3>Page No#1</h3>
        <dd><input type='textbox' id='textbox1' ></dd>
    </li>

    </ul>

</div>
<input type='button' value='Add Page' id='addButton'>
<input type='button' value='Remove Page' id='removeButton'>

</body>
</html>

Answer 1

您可以在父元素中捕获事件。

事件委托方法只将一个事件处理程序附加到一个元素tbody，而事件只需要向上冒一个级别（从点击的tr到tbody）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.0.0/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select/dist/react-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css" type="text/css" />

<div id="container"></div>

你不需要$( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); });。

＆＃13;

window.onload

＆＃13;

$(function() {
  var counter = 2;
  $("#addButton").click(function() {

    var newTextBoxDiv = $(document.createElement('li'))
      .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<h3>Page No#' + counter + '</h3><dd>' +
      '<input type="text" name="textbox' + counter +
      '" id="textbox' + counter + '" value=""  /></dd>');

    newTextBoxDiv.appendTo("#toggle-view");


    counter++;
  });

  $("#removeButton").click(function() {
    if (counter == 1) {
      alert("No more textbox to remove");
      return false;
    }

    counter--;

    $("#TextBoxDiv" + counter).remove();

  });


  var parent = $('#toggle-view'), // storing main ul for use below
    delay = 200; // storing delay for easier configuration

  // bind the click to all headers 'li h3', parent
  $('#toggle-view').on('click', 'li', function(event) {

    var li = $(this);

    // check to see if this li is not already being displayed
    if (!$('dd', li).is(':visible')) {
      // loop on all the li elements
      $('li', parent).each(function() {
        // slide up the element and set it's marker to '+' 
        $('dd', $(this)).slideUp(delay);

      });


      $('dd', li).slideDown(delay);

    }
  });

});

＆＃13;

div {
  padding: 8px;
}

#toggle-view {
  list-style: none;
  font-family: arial;
  font-size: 11px;
  margin: 0;
  padding: 0;
  width: 300px;
}

#toggle-view li {
  margin: 10px;
  border: 1px solid #ccc;
  padding: 4px 3px;
  position: relative;
  cursor: pointer;
}

#toggle-view h3 {
  margin: 0;
  font-size: 14px;
}

#toggle-view span {
  position: absolute;
  right: 5px;
  top: 0;
  color: #ccc;
  font-size: 13px;
}

#toggle-view dd {
  margin: 5px 0;
  display: none;
}

＆＃13;

Answer 2

使用jQuery委托将事件处理程序绑定到dom中尚不存在的元素

$('#toggle-view').on( 'click', 'li', function( event ) {

创建动态列表后未调用jQuery切换函数

2 个答案: