插入笑臉文本和這個播放圖像

Question

請大家，我有一個問題。我創建哪裏表情文本可以在文本區域中插入單擊該圖像時，當點擊提交按鈕是通過Ajax方法提交表單的頁面，這裏是工作非常精細的代碼：

<form id="my_form"> 
    <textarea name="comment" id="comment" class="open" placeholder="Comment..."></textarea><br> 
    <input type="hidden" id="post" name="post" value="<?php echo $my_id; ?>" /> 
    <span id="form_span"><input type="submit" name="submit" id="submit" class="comment_send" value="COMMENT" /></span><div style="display:none;" id="form_progress"><img src='progress-dots.gif' /></div> 
    <div id="form_error" style="display:none;"><a href="javascript:;" style="float:right;margin:5px 5px;color:#fff;text-decoration:none;" onclick="document.getElementById('form_error').style.display='none'">x</a>Please make a Comment!</div> 
    <div id="emoji" class="emoji"> 
    <a href="javascript:;" title=":glad;"><img title="glad" border="0" src="emojis/smiley2.png" /></a> 
    <a href="javascript:;" title=":joy;"><img title="joy" border="0" src="emojis/smiley3.png" /></a> 
    <a href="javascript:;" title=":jeer;"><img title="jeer" border="0" src="emojis/smiley43.png" /></a> 
    <a href="javascript:;" title=":angry;"><img title="angry" border="0" src="emojis/smiley76.png" /></a> 
</div> 
    </form> 
<script src="js/jquery.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#my_form').submit(function(e) { 
       e.preventDefault(); 
       if($("#comment").val() == "") 
        { 
         $('#comment').focus(); 
        document.getElementById('form_error').style.display='block'; 
        } else { 
       $.ajax({ 
        method: "GET", 
        url: "comment_send.php", 
        data: $(this).serialize(), 
        beforeSend: function(){ 
         document.getElementById('form_error').style.display='none'; 
         document.getElementById('form_progress').style.display='block'; 
         $('#form_span').html("<input type='submit' name='submit' id='submit' class='disable_comment' value='COMMENT' disabled/>"); 
        }, 
        success: function(status) { 
         $('#comment').val(''); 
         document.getElementById('form_progress').style.display='none'; 
         $('#form_span').html("<input type='submit' name='submit' id='submit' class='comment_send' value='COMMENT' />"); 
        } 
       }); 
        } 
      }); 
     }); 
    </script> 
//to insert the emoji texts in the text area 
    <script type="text/javascript"> 
     $('#emoji a').click(function() { 
    var smiley = $(this).attr('title'); 
    ins2pos(smiley, 'comment'); 
}); 

function ins2pos(str, id) { 
    var TextArea = document.getElementById(id); 
    var val = TextArea.value; 
    var before = val.substring(0, TextArea.selectionStart); 
    var after = val.substring(TextArea.selectionEnd, val.length); 

    TextArea.value = before + str + after; 
    setCursor(TextArea, before.length + str.length); 

} 

function setCursor(elem, pos) { 
    if (elem.setSelectionRange) { 
     elem.focus(); 
     elem.setSelectionRange(pos, pos); 
    } else if (elem.createTextRange) { 
     var range = elem.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', pos); 
     range.moveStart('character', pos); 
     range.select(); 
    } 
} 
    </script> 

而且我也使用jQuery的.load功能，顯示在同一頁面的評論：

<div id="comment_display" style="width:250px;height:500px;overflow-y:auto;"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      setInterval(function() { 
       $('#comment_display').load('comment_display.php') 
      }, 1000); 
     }); 
    </script> 

這裏是comment_display.php頁：

<?php 
include 'connect.php'; 
$query = mysqli_query($con, "SELECT * FROM comments ORDER BY id DESC"); 
while($row = mysqli_fetch_array($query)){ 
    $comment = $row['comment']; 

    echo "<p>".$comment."</p>"; 
    } 
    ?> 

而這一切的代碼工作很不錯，但我現在的問題是，我想有自己的形象來代替表情符號的文本是一直顯示，所以我用這個代碼：

 <script type="text/javascript"> 

// for :glad; 
$("body").html($("body").html().replace(/:glad;/g,'<img src="emojis/smiley2.png" />')); 

// for :joy; 
$("body").html($("body").html().replace(/:joy;/g,'<img src="emojis/smiley3.png" />')); 

// for :jeer; 
$("body").html($("body").html().replace(/:jeer;/g,'<img src="emojis/smiley43.png" />')); 

// for :angry; 
$("body").html($("body").html().replace(/:angry;/g,'<img src="emojis/smiley76.png" />')); 
    </script> 

但是，當我這最後的javascript代碼添加到更換表情符號文本，即插入表情符號的文本到textarea的表情符號圖像停止工作，如果我點擊它們就不會做任何事情

Answer 1

我已經創建小的演示的是更換隻是一個字

$("button").on('click', function() { 
 
    var txt = $("textarea").val(); 
 
    var newtxt=txt.replace(/:glad/g, '<img src="emojis/smiley76.png" />'); 
 
    $("textarea")[0].innerText=newtxt; //YOU HAVE TO SET NEW TXT IN TEXTAREA 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea cols="5" rows="5">:glad</textarea> 
 
<button> 
 
    click 
 
</button>

可能b。您已經使用$（體）的.html（）這就是爲什麼它不是working..This可能b不是你的答案，但你可以知道什麼是你的代碼所缺少..