Execute JavaScript, into the divs opened previously with jQuery/JavaScript

Question

I am doing a comment system. Yesterday I asked for the same problem in stackoverflow and I didnt get any answer. Now I have simplificated the code, so I hope that its easier to understand. I also write complete code if someone what to try it.

The main HTML page has multiple divs .

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jscripts/actions.js"></script>
</head>

<body>
<div class="comments_div" id="comments_div" data-id="22" > 
  div_22--->
 <div class="comments_more_22" id="comments_more"> </div>
</div>
<br>
<div class="comments_div" id="comments_div" data-id="23" > 
  div_23--->
 <div class="comments_more_23" id="comments_more"> </div>
</div>
<br>
<div class="comments_div" id="comments_div" data-id="24" > 
  div_24--->
 <div class="comments_more_24" id="comments_more"> </div>
</div>
<br>
</body>

The jQuery/JavaScript functions open/hide the div and show the post_id (data-id). Its works perfect!.

//Open div
$(function() {
  $(".comments_div").click(function() {
    var post_id = $(this).attr('data-id');       
    $.ajax({
      url: "jscripts/comment.php",
      type: "POST",
      data: { post_id: post_id },
      success: function(datos) {
        $('.comments_more_' + post_id).html(datos);
        $('.comments_more_' + post_id).show('slow');
        //alert(post_id);
      }
    });
  });
})


//Hide div
$(document).mouseup(function (e){
    var container = $('div[id^="comments_more"]');
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {        container.hide('slow');    }
});

//Put text in some div
function showText()
{ document.getElementById("flash").textContent = 'works!';}

...and comment.php (here the code will be more complicated, with forms, captchas, etc)

<?php
    echo 'post_id: ';
    echo $_POST['post_id'];
?>

<div class="flash" id="flash">- </div>

<span style="margin-left:20px;"><small>click<a href='javascript: showText();'>here</a> </small></span><br/>

Nice, isn't it?. But I need to execute another JavaScript: showText() . This script works when you click in this order: div_24, div_23, div_22. But stop works when you try click first div_22, then div_23,... etc.

Answer 1

Well I solved the problem: the div "flash" must have a unique id, so showText can find the correct div.

<?php
    echo 'post_id: ';
    echo $_POST['post_id'];
$post_id=$_POST['post_id'];
?>

<div class="flash" id="flash_<?php echo $post_id; ?>">- </div>

<span style="margin-left:20px;"><small>click<a href='javascript: showText();'>here</a> </small></span><br/>


<script type="text/javascript"> 
//Put text in some div
function showText()
{
var post_id = "<?php echo $post_id; ?>" ;
document.getElementById("flash_" + post_id).textContent = 'works!';
}

</script>

:P

Execute JavaScript, into the divs opened previously with jQuery/JavaScript

Question

1 answers

solution1
0 2017-04-12 13:08:16

Execute JavaScript, into the divs opened previously with jQuery/JavaScript

Question

1 answers

solution1 0 2017-04-12 13:08:16

solution1
0 2017-04-12 13:08:16