Изменение html диапазона не загружает все свойства

Вопрос:

Я пытаюсь создать систему комментариев и комментариев на своем веб-сайте. Я сделал все php файлы, но застрял, меняя количество голосов.

enter image description here

Как показано на рисунке, при голосовании один раз контент изменяется отлично, я могу изменить класс с upvote на upvoted или downvote на downvoted или, как мне нужно.

Но проблема в том, что после изменения класса содержимое тоже меняется. Но я не могу голосовать снова, пока страница не будет перезагружена.

Перед этим кодом я менял класс с помощью addClass() и removeClass().

Это тоже привело к одной и той же проблеме.

.html

<span class='votes'><span data-id='8' class='comment vote upvote'></span>".$row['downvotes']."</span>

myId — это идентификатор данных. как вы можете видеть, я изменяю содержимое html переменной x, используя данные.

Но как только я изменился, я не могу голосовать снова.

.js(JQuery)

 $(document).ready(function(){

$('#notice').hide();
$("span").click(function(){
if($(this).hasClass('vote')){
var myId = $(this).attr('data-id');
var action = 'a';
if($(this).hasClass('upvote')){
action = 'upvote';
} else if($(this).hasClass('upvoted')){
action = 'upvoted';
} else if($(this).hasClass('downvote')){
action = 'downvote';
} else if($(this).hasClass('downvoted')){
action = 'downvoted';
}
var url;
var class1;
var class2;
if(action=='upvote'){
class1 = "upvoted";
class2 = "downvote";
}else if(action=='upvoted'){
class1 = "upvote";
class2 = "downvote";
}else if(action=='downvote'){
class1 = "upvote";
class2 = "downvoted";
}else if(action=='downvoted'){
class1 = "upvote";
class2 = "downvote";
}
var content;
/* If voted element is video */
if($(this).hasClass('video')){
url = base_url + 'forms/votes/vote_video.php';
content = 'video';
}
/* If voted element is comment */
else if($(this).hasClass('comment')){
url = base_url + 'forms/votes/vote_comment.php';
content = 'comment';
}
var x  = $(this).parent();
if(action=='upvote'){
content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvoted'></span>";
content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvote'></span>";
}else if(action=='upvoted'){
content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvote'></span>";
content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvote'></span>";
}else if(action=='downvote'){
content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvote'></span>";
content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvoted'></span>";
}else if(action=='downvoted'){
content1 = "<span data-id='"+ myId +"' class='"+ content +" vote upvote'></span>";
content2 = " <span data-id='"+ myId +"' class='"+ content +" vote downvote'></span>";
}

$.post(url, { myId:myId, action:action }, function(data){
if(data=="error"){
alert("Error, your vote couldn't be counted.");
}
else{
x.html(content1+data.up+content2+data.down);
}

},"json");

}
});

});

Пожалуйста, помогите мне здесь. Или совет о том, как я могу загрузить только диапазоны votes.

Лучший ответ:
$("span").click(function(){

Обработчик событий привязан ко всем элементам span, которые в настоящее время находятся на странице. Вы создаете новые элементы с каждым щелчком. У них нет обработчика. Вы можете использовать

$(document).on('click', 'span.vote', function(...

Это также будет обрабатывать клики по новым элементам.

Вы упомянули, что раньше не создавали новые элементы, и это тоже не сработало. Чтобы решить это, нам понадобится предыдущий код.

Оцените статью
TechArks.Ru
Добавить комментарий