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);
    });
});

EDIT2 现在我知道我需要使用以下ID的唯一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函数中）。 / p>

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

使用php时jQuery函数会中断

1 个答案: