克隆Div和事件处理程序显示/隐藏

Clone Div and Event Handlers Show/Hide

本文关键字：显示 隐藏 程序 事件处理 Div 克隆      更新时间：2023-09-26

我正在克隆div #Play_Start，在它下面我有隐藏/显示事件，这些事件将特别发生在每个克隆的div中。但在克隆上，只有第一个div事件有效。

事件：从下拉列表中选择播放，隐藏潜水。

我希望事件在每个div上和同一个克隆的div中触发。

我的小提琴链接http://jsfiddle.net/kgm50e43/

var count = 1;
function clone() {
  if (count < 5) {
    $(this).parents("#Play_Start").clone()
      .appendTo("#Clone_Play")
      .on('click', 'button.clone', clone)
    count++;
  } else {}
}
$("button.clone").on("click", clone);
function InputDropDown() {
  var MainNav = $('#Inputs-Control').val();
  if (MainNav == 1) {
    alert('hi');
    $('#Play_Start').children('.IconTest').hide();
  };
}
.clone {
  display: block;
  background-color: red;
  padding: 10px;
}
.clonedInput {
  position: relative;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Play_Start" class="col s12 l12 m12 First_sec clonedInput">
  <div class="col s3 l3 m3 input-field">
    <input type="text" id="tpOne" class="timepicker" placeholder="Start">
  </div>
  <div class="col s2 IconTest">
    asd
  </div>
  <div class="col s2 input-field">
    <select id="Inputs-Control" class="form-control" name="article()" onchange="InputDropDown();">
      <option value="0">Select</option>
      <option value="1">Play</option>
      <option value="2">Change</option>
      <option value="3">Pause</option>
      <option value="4">Stop</option>
      <option value="5">If</option>
    </select>
  </div>
  <div class="col s2 m2 l2">
    <button class="clone btn-floating btn-small waves-effect waves-light red counter_start_btn" onclick="clone();">
      <i class="material-icons">add</i>
    </button>
  </div>
  <div id="Clone_Play"></div>

查看

https://jsfiddle.net/kgm50e43/1/

$(document).on('click', 'button.clone', clone);
$(document).on('change', '.form-control', function() {
    console.log($(this).val())
    var MainNav = $('.form-control').val();
    if (MainNav == 1) {
        alert('hi');
        $('#Play_Start').children('.IconTest').hide();
    };
});

这是你需要的吗。

我在你的代码中发现的问题：

$（'#Inputs Control'）.val（）

只有当页面上有一个Id时，Id选择器才能工作，这是它应该的方式。如果没有，你应该使用class。

$（document）.on（'change'，'.form-control'

此外，您应该尝试绑定类似于上面的内容，我通常会这样做，因为即使是将来可用的元素，它也能工作。

希望能有所帮助。

相关文章：