JQuery оленья кожа событий работа над HTML формы в JavaScript

Question

Эй, ребята, у меня есть код следовать в ЯШ:

$(document).ready(function(){ 
$(".replyLink").click(function(){ 
    $("#form-to-"+this.id).html(htmlForm()).toggle(500); 
return false; 
}); 
function htmlForm(){ 
    var html; 
    html ='<form class="comment-form" id="form-post" action="request.php" method="post">'; 
    html +='<input type="hidden" name="post_id" value="" />'; 
    html +='<input type="hidden" name="reply" value="" />'; 
    html +='<table><tr><td>Name:</td><td>'; 
    html +='<input class="name" type="text" name="name" size="20" maxlength="30"/>'; 
    html += ...... 
return html; 
} 

//this is not working!////////////////////////////////////////// 
$(".comment-form input,.comment-form textarea").focus(function(){ 
    $(this).css({ 
     'background-color': 'white', 
     'border':'1px solid #3faefc', 
     'box-shadow': '0px 0px 2px 1px #95d3ff' 
    }); 
}); 
///////////////////////////////////////////////////////////// 
}); 

HTML У меня есть ссылка на пример:

<a href='#' class="replyLink">Reply</a> 

и когда я нажимаю эту форму переключать «где-то», но я не могу управлять элементом htmlForm() с кодом! Tnx

Answer 1

Вы не можете связать обработчики событий непосредственно на элементах, которые пока не существуют. Вероятно, самое простое изменение для исправления заключается в том, чтобы создать все формы вверх в обработчике документов, а не создавать их по одному в обработчике кликов «.replyLink». Обратите внимание, что в настоящее время каждый раз, когда вызывается обработчик вашего клика, он воссоздает форму, устанавливая html-элемент родительского элемента «# form-to -...», независимо от того, существовал он уже.

$(document).ready(function(){ 
    // create the forms up front 
    $('[id^="form-to-"]').html(htmlForm()); 

    $(".replyLink").click(function(){ 
     $("#form-to-"+this.id).toggle(500); // don't set html here, just toggle 
     return false; 
    }); 

    function htmlForm(){ 
    /* your existing function body here */ 
    } 

    $(".comment-form input,.comment-form textarea").focus(function(){ 
     /* your existing CSS setting code here */ 
    }); 
}); 

Если по какой-то причине, что не соответствует с тем, как вы хотите, чтобы делать то, что я могу думать о трех других способов обойти эту проблему:

1. Bind событие фокус в вашей " .replyLink ", после создания элементов формы.

2. Использование обработки делегированы событие, то есть, использовать .delegate() или .on() (или .live(), если у вас есть очень старая версия JQuery) вместо .focus() присоединить обработчик события к родительскому элементу, который действительно существует. Затем это автоматически применимо к элементам, добавленным позже.

3. Не создавать элемент формы динамически. Введите форму в своей начальной разметке html и .hide() или .show() при необходимости.

Answer 2

Вы должны вызвать .focus после $("#form-to-"+this.id).html(htmlForm()).toggle(500);

Создать форму -> затем сосредоточиться на поле.

Answer 3

Fedya Skitsko прав, слушатель привязан к предметам, прежде чем добавлять форму в DOM, поэтому он не будет прикреплен.

Если вы используете jQuery 1.7+, я бы предложил использовать событие «on», чтобы связать событие фокуса, чтобы вы могли захватывать события, сделанные в форме, когда они добавляются в DOM после того, как связанный с ним прослушиватель связан.

См http://api.jquery.com/on/

$(document).on('focus', function(){ 
     $(this).css({ 
     'background-color': 'white', 
     'border':'1px solid #3faefc', 
     'box-shadow': '0px 0px 2px 1px #95d3ff' 
    }); 
}); 

В версиях до 1.6 вы можете использовать .live() или .delegate()

http://api.jquery.com/delegate/

http://api.jquery.com/live/