Как заставить javascript в innerHTML работать после AJAX
Я создаю систему голосования. После того, как пользователь нажмет эту кнопку (div), будет вызван ajax для передачи данных на другую страницу, выполняющую SQL для вставки идентификатора сеанса, значения голосования, идентификатора голосования и отображения нового итога
вот мой аякс
$('.like').on('click', function(){
var voteclass=2;
var vote_id=$(this).parent().attr("id");
var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
$.ajax({
url:"insert.php",
cache:0,
data:poststr,
success:function(result){
$('#'vote_id).html(result);} }); });
После ajax, insert.php выполните SQL и покажите результат, который является тем же содержимым div для голосования, что и fontpage, но с новым общим значением.
Мой вопрос в том, что я не могу проголосовать снова, не обновив всю страницу. Означает ли это, что innerHTML не может загрузить скрипт в элемент head внешней (я не знаю, что такое термин) страницы? и как я могу это решить?
3 answers
Я решил, что просто добавлю ответ: Рабочая скрипка
Javascript:
Я завернул всю логику в документ. готов убедиться, что DOM полностью загружен, что, я полагаю, вы тоже делаете.
Я также использовал "вкл" вместо "привязать", так как это предпочтительный метод jQuery с их текущей библиотекой.
Мой вызов ajax - это макет вызова ajax для jsFiddle, но вы можете просто заменить URL-адрес своим index.php .
В успехе, который я использовал $('.'+vote_id), потому что вы получаете "класс" родителя, поэтому вам нужен "." вместо "#" в селекторе jquery. На вашем месте я бы изменил переменную "vote_id" на "parentvoteclass".
Наконец, я использовал "добавить", потому что вы не хотели терять существующий html-код в родительском теге. Это добавит значение из результата в конец существующего html-кода в родительском элементе. Если вы используете prepend(результат), он будет помещен первым, а использование .html(результат) заменит это.
$(document).ready(function() {
$('.like').on('click', function(){
var vote_teacher = 1;
var voteclass = 2;
var vote_id = $(this).parent().attr("class");
var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
$.ajax({
type: "POST",
url: "/echo/json/",
data: poststr,
cache: false,
success: function(result) {
var someDatafromResult = "my stuff";
$('.'+vote_id).append(someDatafromResult);
}
});
});
});
HTML:
<div id="parent" class="parentClass">
<a href="#" class="like">Vote!</a>
</div>
ОБНОВЛЕНИЕ:
Я изменил вашу скрипку: Измененная скрипка
Основное изменение здесь:
function main(){
$('#something').on('click','.agree', function(){...code hidden...}
Это позволяет вам привязать событие к родительскому элементу, вместо "#что-то" вы также можете использовать документ. Теперь, если ваш html-код с классом "согласен" будет заменен или удален, even все еще будет жить.
Я подделал успешное возвращение php здесь:
success:function(result){
$('#'+des_id+'').html('<li>text <span class="votes_type "> <a href="#!" class="agree">'+voteNumber+'<img src="png"></a> <a href="#!" class="disagree">disagreenumber<img src="png"></a> </span> </li> ');
;}
Я использовал какой-то встроенный строковый html, чтобы подделать html верните результат, а затем используйте переменную "Votenumber", которая увеличивается с каждым щелчком мыши, чтобы показать, что она действительно меняется и продолжает работать.
Вам нужно использовать функцию on(), изменить:
$('.like').bind('click', function(){
До
$('body').on('click','.like', function(){
И, конечно, я предполагаю, что ваш сценарий, фрагмент которого вы нам показываете, завернут в:
$(document).ready(function(){
...
});
Также измените это:
var vote_id=$(this).parent().attr("class");
Кому:
var vote_id=$(this).parent().attr("id");
Попробуйте вот это..
$('.like').on('click', function(){
var voteclass=2;
var vote_id=$(this).parent().attr("class");
var poststr="voteclass="+voteclass+"&voteteacher="+vote_teacher;
$.ajax({
url:"insert.php",
cache:0,
data:poststr,
success:function(result){
$('#vote_id').html(result);
}
});
});