焦点在动态生成时无法在contenteditable div中工作

我有一个很奇怪的问题，并且在过去的一个星期里努力修复它。我使用PHP函数生成一系列contenteditable div（实质上，这些是用户帖子，可持续的div用于添加另一个帖子）。该功能允许用户点击更多标签以获得另一组contenteditble div。焦点在动态生成时无法在contenteditable div中工作

功能第一次没有任何问题。我一次生成大约10个div，第一次所有10个工作都很好。当我点击更多标签时，下一组contenteditable div不允许我输入。它失去了重点。我试图把焦点重新设置回来，但它似乎没有工作。

PHP函数生成的div在下面给出：

foreach($cursor as $record){ 
foreach ($record as $key => $value){ 
     if($key=='Name'){ 
     $topText = "<font class='postHeaderLabel'>Posted By ".$value."</font>"; 
     } 
     else if($key=='Category'){ 
     $topText =$topText."<font class='postHeaderLabel'> for Category ".$value."</font>"; 
     } 
     else if($key=='Brand'){ 
     $topText = $topText."<font class='postHeaderLabel'> and brand ".$value."</font><br>"; 
     } 
     else if($key=='Post'){ 
     $mainPost =$value; 
     htmlentities($mainPost, ENT_QUOTES, "UTF-8"); 
     $mainPost = utf8_decode($mainPost); 
     $mainPost = htmlentities($mainPost, ENT_QUOTES); 
     } 
     else if($key=='_id'){ 
     $id =$value; 
     } 
    } 
    echo "<div class='postWrapper'>"; 
    echo "<div class='postHeaderDiv'>"; 
    echo $topText; 
    echo "</div><div class='postTextDiv'>"; 
    echo $mainPost; 
    echo "</div><div id='commentBoxInside' class='commentBoxInside".$id."' 
     tabindex='".$startindex."' data-id='".$id."' contenteditable='true'>Enter Your 
     Thoughts</div>"; 
    $startindex++; 
    echo "<div id='textarealinksInside' class='textarealinksInside'> 
     <a class='postInside' data-id='".$id."'>Post</a></div>"; 
    $innerQuery = array('$and'=>array(
     array('parentID'=>trim($id)) 
)); 
    $innerCursor = $collection_inner->find($innerQuery,array('Name'=>1,'Post'=>1))->limit(5) 
       ->skip(0)->sort($sort); 
    $innerRecord = array(); 
    $innerTopText = ""; 
    $innerMainPost = ""; 
    foreach($innerCursor as $innerRecord){ 
     foreach ($innerRecord as $innerKey => $innerNextValue){ 
      if($innerKey=='Name'){ 
      $innerTopText = $innerNextValue; 
      } 
      else if($innerKey=='Post'){ 
      $innerMainPost =$innerNextValue; 
      } 
     } 
     echo "<div id='innerPostDiv' class ='innerPostDiv'> 
       <font class='innerpost'>".$innerMainPost."</font> 
       <font class='innerlabel'> Posted by: ".$innerTopText."</font></div><br>"; 
    } 
    echo "<div class='innermore' id='innermore-".$id.$innerpage."' 
      data-id='".$innerpage."' data-parentid='".$id."'>more...</div>"; 
    echo'<h2></h2>'; 
    echo "</div>"; 
} 
echo "<div class='more' id='more-".$page."' data-id='".$page."'> 
    <font class='morelabel'>more...</font></div>";

JQUERY FOR MORE

$('.more').live('click',function(){ 
var page = $(this).attr("data-id"); 
$.ajax({ 
     url: 'moreposts.php', 
     data: { 
      page: page 
     }, 
     type: 'POST', 
     success: function (data) { 
     $("div#more-"+page).html(data); 
     } 
    }); 
});

Moreposts.php简单地调用上述

JQUERY功能FOR FOUCS（不工作）

$('#commentBoxInside').live('click',function(){ 
$(this).focus(); 
}); 
$('#commentBoxInside').live('focus',function() { 
var th = $(this); 
    th.focus(); 
});

来源

2014-02-27 Shantanu

很难弄清楚，因为这个不可读的服务器端脚本，但ID必须是唯一的。在这里，您呈现无效的HTML。顺便说一句，将发布呈现HTML作为客户端，而不是这个丑陋的服务器端代码 –

是真的更好，ID是绝对唯一的。正如我第一次提到它可以正常工作。当我生成下一组帖子时，问题开始发生。如果您需要更多信息，请告知我 – Shantanu

当您在循环内回显相同的元素ID时，ID如何唯一。请检查您呈现的HTML并查看...例如，看起来不像'＃innerPostDiv'是唯一的。顺便说一句，为什么不发布这个百页HTML客户端？ –

感谢大家的帮助。我终于解决了。本质上，DOM的回调发生在我的JQuery中，它覆盖了我的div的FOCUS或CLICK事件中的动作。一个简单的返回false保存了一天 - 因为它指示DOM，以避免任何进一步的回电

来源

2014-03-02 00:04:14 Shantanu

你不能在动态生成elements.Try的情况下绑定功能，“ID”这个

$('.commentBoxInside').on('focus',function(){ 
    //Do you stuff here 
});

来源

2014-02-27 13:36:06 Tyranicangel

试过这似乎并不工作:( – Shantanu

焦点在动态生成时无法在contenteditable div中工作

回答

相关问题