jQuery 在 mysql 查询后直接加载实时预览表单

Question

我在此页面上找到了很棒的 jQuery 代码，并在我的网站上使用了它。它很好用。带有 jQuery 的表单和实时预览。但是现在当我想更新数据库并再次打开表单时，它会正确地将文本放入表单域中，但只有在我单击进出该字段后才会开始预览。我如何强制我的函数在 mysqli 查询后直接开始预览？

    $(document).ready(function() {
    var commentNode = $('#lp-comment'),
        contactNode = $('#lp-contact'),
        contact = $('#contact'),
        website = $('#website');

    //comment...easy
    $('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',function() {
        //comment
        commentNode.text($('#comment').val());
        commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
        contactNode.text(contact.val() + ' says:');

    });
});

 $(document).ready(function() {
 var commentNode = $('#lp-comment'),
  contactNode = $('#lp-contact'),
  contact = $('#contact'),
  website = $('#website');
 
 //comment...easy
 $('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',function() {
  //comment
  commentNode.text($('#comment').val());
  commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
  contactNode.text(contact.val() + ' says:');
  
  

  
  
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="live-preview-form" class="lp-block field">
 <input name="contact" class="input" placeholder="Kontaktperson" type="text" id="contact" value ="<?php echo $contact ?>" required />
 </div>

<div id="live-preview-display" class="lp-block">
 
 <div id="lp-contact"></div>
 <div id="lp-comment"></div>
</div>

Answer 1

您需要在重新加载页面或任何其他数据更新时刷新预览。您可能会考虑创建一个函数来更新预览，以便可以在 $(document).ready、onblur 和 onkeyup 中调用它：

$(document).ready(function() {
  updatePreview();

  $('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',updatePreview);
});

function updatePreview(){
  var commentNode = $('#lp-comment'),
      contactNode = $('#lp-contact'),
      contact = $('#contact');

  commentNode.text($('#comment').val());
  commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
  contactNode.text(contact.val() + ' says:');

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="live-preview-form" class="lp-block field">
 <input name="contact" class="input" placeholder="Kontaktperson" type="text" id="contact" value ="<?php echo $contact ?>" required />
 </div>

<div id="live-preview-display" class="lp-block">
 
 <div id="lp-contact"></div>
 <div id="lp-comment"></div>
</div>

jQuery 在 mysql 查询后直接加载实时预览表单

jQuery live preview form load directly after mysql query

forms

jquery

mysqli

live-preview