具有动态内容的模态不会将值设置为文本字段

Posted 2021-03-31

我正在将内容加载到模式中，并使用复选框将电子邮件地址设置为“收件人”文本字段。如果我对内容进行硬编码，这可以正常工作......但是从外部资源加载它，检查的电子邮件地址不会填充收件人字段。

我意识到这里的帖子不会加载我的动态内容的本地资源，所以我不得不加倍代码....首先是我的真实代码，然后是它的工作方式。

原版的

jQuery(document).ready(function() {
  $('.openContacts').on('click', function() {
    $('.modal-body').load('modalcontacts', function() {
      $('#contactsModal').modal({
        show: true
      });
    });
  });

  $('#contactsearch').hideseek({
    highlight: true,
    nodata: 'No results found'
  });

  $(':checkbox[name="addcontact"]').change(function() {
    var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
        return this.id;
      })
      .get();
    $("input[name='recipients']").val(assignedTo.join("; "));
  });
  /*
   * form validator
   */
  $('#ci-form').validator();
  /*
   * TinyMCE WYSIWYG Editor
   */
  tinymce.init({
    selector: 'textarea',
    theme: 'modern',
    plugins: 'autosave code paste print preview searchreplace autolink directionality visualblocks visualchars image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor imagetools contextmenu colorpicker textpattern',
    paste_data_images: true,
    branding: false,
    skin: "lightgray",
    height: 300
  });
});

.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" />

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" name="recipients" value="" id="recipients" maxlength="" class="form-control" placeholder="Email to">
    <span class="input-group-btn">
                            <button data-toggle="modal" data-target="#contactsModal" class="btn btn-info openContacts" type="button">Contacts</button>
                          </span>
  </div>
</div>



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

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <input id="contactsearch" name="search" class="form-control" placeholder="Search..." type="text" data-list=".contactlist" autocomplete="off">
      </div>
      <div class="modal-body">
        <p>Loading....</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.7/tinymce.min.js"></script>
<script src="https://cdn.rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>

应该像这样工作

jQuery(document).ready(function() {
  $('.openContacts').on('click', function() {
    $('.modal-body').load('modalcontacts', function() {
      $('#contactsModal').modal({
        show: true
      });
    });
  });

  $('#contactsearch').hideseek({
    highlight: true,
    nodata: 'No results found'
  });

  $(':checkbox[name="addcontact"]').change(function() {
    var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
        return this.id;
      })
      .get();
    $("input[name='recipients']").val(assignedTo.join("; "));
  });
  /*
   * form validator
   */
  $('#ci-form').validator();
  /*
   * TinyMCE WYSIWYG Editor
   */
  tinymce.init({
    selector: 'textarea',
    theme: 'modern',
    plugins: 'autosave code paste print preview searchreplace autolink directionality visualblocks visualchars image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor imagetools contextmenu colorpicker textpattern',
    paste_data_images: true,
    branding: false,
    skin: "lightgray",
    height: 300
  });
});

.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" />

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" name="recipients" value="" id="recipients" maxlength="" class="form-control" placeholder="Email to">
    <span class="input-group-btn">
			<button data-toggle="modal" data-target="#contactsModal" class="btn btn-info openContacts" type="button">Contacts</button>
		  </span>
  </div>
</div>

<!-- Contacts Modal -->
<div id="contactsModal" class="modal fade in" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <input id="contactsearch" name="search" class="form-control" placeholder="Search..." type="text" data-list=".contactlist" autocomplete="off">
      </div>
      <div class="modal-body">
        <div class="contactlist">
          <h3>A</h3>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Aaron Aaberg</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Aaron Aaby</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abbey Aadland</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abbie Aagaard</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abby Aakre</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abdul Aaland</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abe Aalbers</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abel Aalderink</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abigail Aalund</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abraham Aamodt</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Abram Aamot</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Ada Aanderud</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Adah Aanenson</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Adalberto Aanerud</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Alda Abdo</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Alden Abdon</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Aldo Abdool</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Alena Abdulmuniem</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <h3>B</h3>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Bob Smith</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
          <h3>C</h3>
          <div class="list-group">
            <div class="list-group-item">
              <strong class="list-group-item-heading">Carl Grimes</strong>
              <p class="list-group-item-text">
                <span class="checkbox">
      <label><input type="checkbox" id="[e-mail]" value="[e-mail]" name="addcontact">[e-mail]</label></span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.7/tinymce.min.js"></script>
<script src="https://cdn.rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>

答案

弄清楚了。我必须将事件绑定到在加载文档之前已经存在的父级。

jQuery(document).ready(function() {
  $('.openContacts').on('click', function() {
    $('.modal-body').load("modalcontacts", function() {
      console.log("loaded");
      $('#contactsModal').modal({
        show: true
      });
    });
  });


  $(document).on('mouseover mouseout', '.contactlist', function() {
    $('#contactsearch').hideseek({
      nodata: 'No results found'
    });

    $(':checkbox[name="addcontact"]').change(function() {
      var assignedTo = $(':checkbox[name="addcontact"]:checked').map(function() {
          return this.id;
        })
        .get();
      $("input[name='recipients']").val(assignedTo.join("; "));

    });
  });
});

以上是关于具有动态内容的模态不会将值设置为文本字段的主要内容，如果未能解决你的问题，请参考以下文章

动态 TextView 未在片段中更新

如何从另一个输入文本字段Javascript中输入的值将值设置为输入隐藏字段

如何使具有动态内容的reactstrap模态可调整大小和可拖动？

Java：如何将值从javascript设置为wicket组件文本字段

将其设置为清除后，Swift 模态视图背景显示为黑色

使用 jquery ajax 将值设置为（文本框）服务器控件