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

时间：2017-12-29 21:55:49

标签： jquery twitter-bootstrap-3

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

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

  

原始 

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="aaron.aaberg@somewebsite.com" value="aaron.aaberg@somewebsite.com" name="addcontact">aaron.aaberg@somewebsite.com</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="aaron.aaby@somewebsite.com" value="aaron.aaby@somewebsite.com" name="addcontact">aaron.aaby@somewebsite.com</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="abbey.aadland@somewebsite.com" value="abbey.aadland@somewebsite.com" name="addcontact">abbey.aadland@somewebsite.com</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="abbie.aagaard@somewebsite.com" value="abbie.aagaard@somewebsite.com" name="addcontact">abbie.aagaard@somewebsite.com</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="abby.aakre@somewebsite.com" value="abby.aakre@somewebsite.com" name="addcontact">abby.aakre@somewebsite.com</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="abdul.aaland@somewebsite.com" value="abdul.aaland@somewebsite.com" name="addcontact">abdul.aaland@somewebsite.com</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="abe.aalbers@somewebsite.com" value="abe.aalbers@somewebsite.com" name="addcontact">abe.aalbers@somewebsite.com</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="abel.aalderink@somewebsite.com" value="abel.aalderink@somewebsite.com" name="addcontact">abel.aalderink@somewebsite.com</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="abigail.aalund@somewebsite.com" value="abigail.aalund@somewebsite.com" name="addcontact">abigail.aalund@somewebsite.com</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="abraham.aamodt@somewebsite.com" value="abraham.aamodt@somewebsite.com" name="addcontact">abraham.aamodt@somewebsite.com</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="abram.aamot@somewebsite.com" value="abram.aamot@somewebsite.com" name="addcontact">abram.aamot@somewebsite.com</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="ada.aanderud@somewebsite.com" value="ada.aanderud@somewebsite.com" name="addcontact">ada.aanderud@somewebsite.com</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="adah.aanenson@somewebsite.com" value="adah.aanenson@somewebsite.com" name="addcontact">adah.aanenson@somewebsite.com</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="adalberto.aanerud@somewebsite.com" value="adalberto.aanerud@somewebsite.com" name="addcontact">adalberto.aanerud@somewebsite.com</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="alda.abdo@somewebsite.com" value="alda.abdo@somewebsite.com" name="addcontact">alda.abdo@somewebsite.com</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="alden.abdon@somewebsite.com" value="alden.abdon@somewebsite.com" name="addcontact">alden.abdon@somewebsite.com</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="aldo.abdool@somewebsite.com" value="aldo.abdool@somewebsite.com" name="addcontact">aldo.abdool@somewebsite.com</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="alena.abdulmuniem@somewebsite.com" value="alena.abdulmuniem@somewebsite.com" name="addcontact">alena.abdulmuniem@somewebsite.com</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="bob.smith@somewebsite.com" value="bob.smith@somewebsite.com" name="addcontact">bob.smith@somewebsite.com</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="carl.grimes@gmail.com" value="carl.grimes@gmail.com" name="addcontact">carl.grimes@gmail.com</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>

1 个答案:

答案 0 :(得分：0)

想出来。我必须将事件绑定到在加载文档之前已经存在的父级。

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("; "));

    });
  });
});

相关问题
最新问题