не работает onclick для добавляемого элемента
Доброго всем дня.
Есть div контейнер #send-review который запускается в окне fancybox всё здорово отрабатывает при нажатии на кнопку появляется всплывающее окно. Так вот на появившемся диве #send-review есть кнопка #button-send-review. При нажатии на эту кнопку должен срабатывать onclick(), но он не срабатывает. Погуглив и немного почитав понял что нужно использовать делигированые события, но почему то оно всё равно не отрабатывает.Пытаюсь прикрепить событие к существующему блоку #content-block в котором всё это находится, получается как то так:
$('#content-block').on('click', '#button-send-review', function(){
|
svikator,
либо '#content-block' тоже добавляется либо какое-то id не уникально |
Да действительно content-block добавлялся, переназначил на другой блок заработало. Возник ещё 1 вопрос, чтобы не плодить темы напишу сюда. У меня в этом блоке #send-review кроме срабатывающей кнопки есть инпуты, которые должны изменяться при нажатии.Они изменяются< только при повторном запуске окна #send-review. Как сделать чтобы они изменялись срузу же при нажатии.
Вот так не работает:
$("#name_review").css("borderColor","#FDB6B6");
и так тоже:
var name_review=document.getElementById('name_review');
name_review.style.borderColor = '#FDB6B6';
То есть работают, но только при перезапуске. |
svikator,
делайте минимальный макет иначе ничего не понятно |
Это содержимое которое добавляется через fancybox:
<div id="send-review">
<p align="right" id="title-review">Отзыв появиться после проверки администрацией</p>
<ul>
<li><p align="right"><label id="label-name" >Имя<span>*</span></label><input maxlength="15" type="text" id="name_review" /></p></li>
<li><p align="right"><label id="label-good" >Плюсы<span>*</span></label><textarea id="good_review" ></textarea></p></li>
<li><p align="right"><label id="label-bad" >Минусы<span>*</span></label><textarea id="bad_review" ></textarea></p></li>
<li><p align="right"><label id="label-comment" >Комментарий</label><textarea id="comment_review" ></textarea></p></li>
<p align="right" id="button-send-review" iid="'.$id.'" >Отправить</p>
</ul>
</div>
Затем идёт js который обрабатывает нажатие на динамически добавленую кнопку и нужно чтобы работал на динамически добавленые инпуты:
$('body').on('click', '#button-send-review', function(e){
var name = $("#name_review").val();
var good = $("#good_review").val();
var bad = $("#bad_review").val();
var comment = $("#comment_review").val();
var iid = $("#button-send-review").attr("iid");
if (name != "")
{
name_review = '1';
$("#name_review").css("borderColor","#DBDBDB");
}else {
name_review = '0';
$("#name_review").css("borderColor","#FDB6B6");
}
if (good != "")
{
good_review = '1';
$("#good_review").css("borderColor","#DBDBDB");
}else {
good_review = '0';
$("#good_review").css("borderColor","#FDB6B6");
}
if (bad != "")
{
bad_review = '1';
$("#bad_review").css("borderColor","#DBDBDB");
}else {
bad_review = '0';
$("#bad_review").css("borderColor","#FDB6B6");
}
// Глобальная проверка и отправка отзыва
if ( name_review == '1' && good_review == '1' && bad_review == '1')
{
$("#button-send-review").hide();
$(".auth-loading").show();
$.ajax({
type: "POST",
url: "/include/add_review.php",
data: "id="+iid+"&name="+name+"&good="+good+"&bad="+bad+"&comment="+comment,
dataType: "html",
cache: false,
success: function() {
setTimeout("$.fancybox.close()", 1000);
}
});
}
});
|
svikator, пробуйте
$(function() {
$('body').on('click', '#button-send-review', function(e){
var parent = $(this).parents('#send-review');
var name = $("#name_review",parent).val();
var good = $("#good_review",parent).val();
var bad = $("#bad_review",parent).val();
var comment = $("#comment_review",parent).val();
var iid = $("#button-send-review",parent).attr("iid");
if (name != "")
{
name_review = '1';
$("#name_review",parent).css("borderColor","#DBDBDB");
}else {
name_review = '0';
$("#name_review",parent).css("borderColor","#FDB6B6");
}
if (good != "")
{
good_review = '1';
$("#good_review",parent).css("borderColor","#DBDBDB");
}else {
good_review = '0';
$("#good_review",parent).css("borderColor","#FDB6B6");
}
if (bad != "")
{
bad_review = '1';
$("#bad_review",parent).css("borderColor","#DBDBDB");
}else {
bad_review = '0';
$("#bad_review",parent).css("borderColor","#FDB6B6");
}
// Глобальная проверка и отправка отзыва
if ( name_review == '1' && good_review == '1' && bad_review == '1')
{
$("#button-send-review",parent).hide();
$(".auth-loading").show();
$.ajax({
type: "POST",
url: "/include/add_review.php",
data: "id="+iid+"&name="+name+"&good="+good+"&bad="+bad+"&comment="+comment,
dataType: "html",
cache: false,
success: function() {
setTimeout("$.fancybox.close()", 1000);
}
});
}
});
});
|
Попробовал, теперь событие отрабатывает, уже что то...Но теперь в аяксе ругается на строку
setTimeout("$.fancybox.close()", 1000);
Uncaught ReferenceError: fancybox is not defined at <anonymous>:1:1 Так тоже не работает: parent.fancybox.close() Инпуты по прежнему не изменяются. |
svikator,
а не строкой пробовали? Цитата:
|
Пробовал ошибка:
Uncaught TypeError: Cannot read property 'close' of undefined at HTMLParagraphElement.<anonymous> (shop-script.js:945) at HTMLBodyElement.dispatch (jquery-1.8.2.min.js:3) at HTMLBodyElement.h (jquery-1.8.2.min.js:3) И ещё обратил внимание что в строках:
var name = $("#name_review",parent).val();
var good = $("#good_review",parent).val();
var bad = $("#bad_review",parent).val();
var comment = $("#comment_review",parent).val();
Не присваиваются значения переменных. Если пройтись отладчиком то у них тип undefined Естественно перед отправкой значения заполняю. |
svikator,
без макета к телепатам ... возможно у вас несколько jquery, возможно у вас уже нет $, возможно вам нужен новый fancybox |
| Часовой пояс GMT +3, время: 08:24. |