Question

我有一个非常奇怪的问题，并且在过去的一周里努力修复它。我使用PHP函数生成一系列contenteditable div（基本上这些是用户帖子和contenteitable divs用于添加另一个帖子）。该功能允许用户单击更多标签以获得另一组contenteditble div。

第一次功能正常运行没有任何问题。我一次产生大约10个div，所有10个工作都是第一次正常。当我点击more标签时，下一组contenteditable div不允许我输入。它失去了焦点。我尝试了div焦点来重新设置焦点，但它似乎不起作用。

生成div的PHP函数如下：

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只是调用上面的函数

对于FOUCS（不工作）的观察

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

Answer 1

在动态生成元素的情况下，您无法将函数绑定到“id”。请尝试此

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

Answer 2

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

动态生成时，请注意不要在contenteditable div中工作

2 个答案: