Система комментариев jquery. (... нажмите)

Question

У меня проблемы с привязкой обработчиков событий к будущим загруженным селекторам.Например, когда загружен файл pull.php, Подтверждение удаления больше не скрыто, а также обработчики событий щелчка больше не существуют.Я новичок в JQuery и AJAX.Ниже мой код.$ id = (int) strip_tags ($ _ GET ['id']);

$(document).ready(function() { //make a comment delete js file eventually, just so we can reference the source
    $('.confirmdeletecomment').hide();
    $('.deletecomment').on("click", function(e){
        var cid = $(this).attr("id");
        $('a#c'+cid).show(500, function(){ //right now as call back
            $(this).on("click", function(e){
            var id = $(this).attr("id"); 
            var did = id.substring(1);  
            $.post(

                'deletecommentdata.php?cid='+did,

                function(data)
                {
                   $("#commentarea").load("pull.php?id=<? echo $id; ?>");
                   $("#comment").val("");
                   $('.confirmdeletecomment').hide();

                }

                )

                e.preventDefault();//so it doesn't interpret is as an anchor link

                });



                });

    e.preventDefault();//so it doesn't interpret is as an anchor link
    });


});

</script>

приведенный ниже скрипт является частью php:

<div id="commentarea">

<?

$query = mysql_query("SELECT users.user_id, users.username, users.miniavatar, comments.comment_id, comments.comment, comments.time_stamp FROM users INNER JOIN comments ON users.user_id=comments.products_users_user_id WHERE comments.products_products_id = '$id' ORDER BY comments.time_stamp DESC");

while($row2 = mysql_fetch_array($query)) {

?>
<div id='singlecomment'>

<hr class="comment" />
<table>
<col width="*" />
<col width="400" />
<col width="*" />    
<tr>
<td valign = "top" rowspan="2">
<a href="collection.php?profile=<? echo $row2['user_id']; ?>"><img src="<? echo $row2['miniavatar']; ?>" height="52" width="52" /></a> <br />
<?  
if ($user_id == $row2['user_id']) { 
    $cid = $row2['comment_id'];


    echo "<a id='$cid' class='deletecomment' title='Delete Post'>X</a> &nbsp";
    echo "<a id='c$cid' class='confirmdeletecomment'>confirm</a>";
}   
?>
</td>
<td valign="top">
<a class="blue" href="collection.php?profile=<? echo $row2['user_id']; ?>"> <? echo $row2['username']; ?> </a>
</td>
<td> 
<span class="date"><? echo date("F j, Y g:i a ", strtotime($row2['time_stamp'])); ?> </span>
</td>
<tr>
<td colspan="2">
<? echo stripslashes($row2['comment']); ?> <br/><br/>
</td>
</tr>
</table> 
</div>

Answer 1

То, что вам нужно сделать, это использовать «вкл», как это было задумано. Тут все, что вы делаете - привязываете событие .click к этому элементу в селекторе.

То, что вы хотите:

$('body').on("click", ".deletecomment", function(e){

или что-то вместо 'body', которое является оберткой, которая может отслеживать этот уровень DOM для новых элементов, чтобы применить событие тоже.

Answer 2

Я предполагаю, что событие запуталось, так как вы передаете обработчик события из

$('.deletecomment').on("click", function(e){

в

 $(this).on("click", function(e){

Измените имена событий, если вы действительно хотите обработатьих отдельно.Больше похоже на обновление вашего второго обработчика, так как он будет выполнять goo

$(this).on("click", function(event){

---

Поскольку у меня нет вашей структуры разметки, я предполагаю, что когда вы загружаете pull.php в #commentarea, другой элемент скласс confirmdelete также должен был быть загружен, что делало выполнение кода логически неполным.

Положите $(".confirmdelete").hide(); прямо над e.preventDefault(), чтобы проверить, прав ли я.

Answer 3

Вы должны заглянуть в систему делегирования событий http://api.jquery.com/on/

Answer 4

Попробуйте JQuery жить. подробнее Это должно быть что-то вроде следующего

<script type="text/javascript">

$(document).ready(function() { //make a comment delete js file eventually, just so we can reference the source
    $('.confirmdeletecomment').hide();
    $('.deletecomment').live("click", function(){
        var cid = $(this).attr("id");
        $('a#c'+cid).show(500, function(){ //right now as call back
            $(this).on("click", "a", function(e){
            var id = $(this).attr("id"); 
            var did = id.substring(1);  
            $.post(

        'deletecommentdata.php?cid='+did,

        function(data)
        {
            $("#commentarea").load("pull.php?id=<? echo $id; ?>");
            $("#comment").val("");
            $('.confirmdeletecomment').hide();

        }

        )

            e.preventDefault();//so it doesn't interpret is as an anchor link

            });



        });

        e.preventDefault();//so it doesn't interpret is as an anchor link
        });


});

</script>