javascript - 使用 php 时 jQuery 函数中断

Question

我的目标是使用contenteditable="true" div 以便我可以显示 wp_content 的内容然而，一旦修改，就需要通过 <textarea> 提交我使用以下 jQuery 来在可编辑 div 中进行任何编辑时更新文本区域。

jQuery( "#contentEdit" ).keyup(function( event ) {
    value = jQuery('#contentEdit').html();
    jQuery("#myTextarea").val(value);
});

我有与此相关的元素。

<div id="contentEdit" contenteditable="true">
  <h1>some editable content</h1>
</div>                                          
<textarea class="form-control" id="myTextarea" name="Description" rows="3">
  <h1>some editable content</h1>
</textarea> 

这工作正常...但是，当我尝试添加 <?php the_content(); ?> 时甚至 echo the_content();它坏了，我无法获取 jQuery 代码来更新任何内容。

一个例子是:

<div id="contentEdit" contenteditable="true"><?php echo the_content(); ?></div> 

编辑:我已经在新页面中完美地工作了 - 似乎它无法在引导模式中工作。

我的 jquery 现在看起来像这样:

jQuery(document).ready(function () {
    jQuery(document).on('keyup','#editableContent',function(){
        value = jQuery('#editableContent').html();
        jQuery("#myTextarea").val(value);
    });
});

编辑2现在我知道我需要唯一的 ID，我正在尝试使用以下内容。

var editableID = 'editableContent<?php echo the_ID(); ?>';
var textAreaID = 'myTextarea<?php the_ID();?>';

jQuery(document).ready(function () {
    jQuery(document).on('keyup', editableID ,function(){
        value = jQuery(editableID).html();
        jQuery(textAreaID).val(value);
    });
});

编辑3

我终于使用以下方法完成了这项工作:

jQuery(document).ready(function () {
    jQuery(document).on('keyup', '#editableContent<?php echo the_ID(); ?>' ,function(){
        value = jQuery('#editableContent<?php echo the_ID(); ?>').html();
        jQuery('#myTextarea<?php echo the_ID(); ?>').val(value);
    });
});

对此相当陌生，如果有人可以优化此代码，我们将不胜感激？并告诉我这是否是一种糟糕的形式......

提前非常感谢。

Answer 1

PHP 没有什么特定的东西会破坏 jQuery。 jQuery 在您的 Web 服务器 (PHP) 生成的 HTML 上运行，因此问题出在您生成的 HTML 上。

运行应用程序时，查看生成的 HTML 源并将其与所需的 HTML 模板进行比较。我敢打赌两者之间存在重大差异(我假设您使用手动编码的 HTML 成功测试了您的应用程序，然后尝试将该手动编码的 HTML 抽象到您的 the_content() PHP 函数)。

需要明确的是，我希望问题出在您的 the_content() 函数中，但我只是想指出，您遇到的任何问题都来自您的特定实现，而不是因为您的架构决定使用 PHP。