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>