克隆按钮在javascript中不起作用

Question

我克隆的第二个按钮不能打开模态......我怎么能解决这个问题

enter link description here

Answer 1

根据documentation

使用clone(true)

$(document).ready(function() {
  $(".myBtn").click(function() {
    $("#myModal").modal();
  });
  $("#mode").click(function() {
    $(".ok").clone(true).appendTo("#clones");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">

  <div class="ok" id="notok">
    <select>
        	<option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    <button type="button" class="myBtn" id="myBtn">Open Modal</button>

  </div>

  <div id=clones></div>

  <button id="mode">Clone</button>




  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

Answer 2

尝试委派活动

$("body").on('click', '.myBtn',function(){
    $("#myModal").modal();
});

Answer 3

试试这个 -

$(document).ready(function(){
    $(".myBtn").click(function(){
        $("#myModal").modal();
    });
    $("#mode").click(function(){
        $(".ok").clone(true).appendTo("#clones");
    });

});

Answer 4

在克隆

中传递 true

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="responseForm" action="#" class="right mdl-form mdl-form-registration demo-registration" >
  <div class ="mdl-card mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-shadow--2dp" >
  <ul class="mdl-list">
    <li class="mdl-list__item">
        <span class="mdl-list__item-secondary-action">
           <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file1" name="replyfiles1" class="none filetype" type="file" multiple/>
            </label>
        </span>
        <div id="file_input_text_div1" class="mdl-textfield mdl-js-textfield textfield-demo">
              <input  class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text1" />
              <label class="mdl-textfield__label" for="file_input_text1"></label>
        </div>
    </li>
   
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file2" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div2" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text2" />
           <label class="mdl-textfield__label" for="file_input_text2"></label>
       </div>
    </li>
    
    
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file3" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div3" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text3" />
           <label class="mdl-textfield__label" for="file_input_text3"></label>
       </div>
    </li>
    
    
    <li class="mdl-list__item">
       <span class="mdl-list__item-secondary-action">
            <label class="mdl-button mdl-js-button mdl-button--colored">
                <i class="material-icons">file_upload</i>
                <input id="file_input_file4" name="replyfiles2" class="none filetype" type="file" multiple/>
           </label>
        </span>
        <div id="file_input_text_div4" class="mdl-textfield mdl-js-textfield textfield-demo">
            <input class="file_input_text mdl-textfield__input" type="text" readonly  id="file_input_text4" />
           <label class="mdl-textfield__label" for="file_input_text4"></label>
       </div>
    </li>
    
  </ul>
  </div>
</form>

这是链接

https://jsfiddle.net/f7hjh1gf/1/