Jquery: при добавлении кнопки отправки, она не может быть выбрана снова - PullRequest
Новая
       18

Jquery: при добавлении кнопки отправки, она не может быть выбрана снова

0 голосов
/ 29 июня 2010

Я хотел бы добавить кнопку на текущую страницу, используя функцию html ().

Эта кнопка должна быть доступна для выбора и предупреждать («щелкать») при нажатии.Это кажется невозможным.

Посмотрите на этот код 

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(event){
        $('div').html('<form method="post" action=""><input type="submit" /></form>');
        event.preventDefault();
    }); 
    $(':submit').click(function(event){
        event.preventDefault();
        alert('click');
    });
});
</script>


<a href="#">Click here to add button</a>
<div>Here</div>

Я хочу иметь возможность нажать <a href="#">Click here to add button</a>.Jquery использует $('div').html('<form method="post" action=""><input type="submit" /></form>'); для замены div на кнопку отправки.

Я хочу, чтобы нажатие кнопки отправки вызвало alert('click').Это не происходит, хотя.

Есть идеи, почему?

Спасибо,Marius

Ответы [ 4 ]

1 голос
/ 29 июня 2010

Используйте делегирование события , либо с live или delegate. E.g.:

$(':submit').live("click", function(event){

live будет:

Прикрепить обработчик к событию для всех элементы, которые соответствуют текущему селектор, сейчас или в будущем.

Таким образом, обработчики событий, прикрепленные к элементам, которые были внедрены в DOM программно, будут работать независимо от того, когда эти обработчики были присоединены.

0 голосов
/ 29 июня 2010

Когда вы используете bind(), он сразу присоединяет обработчик к набору элементов, возвращаемых селектором.

Таким образом, в документе готов, $(":submit") вернет ноль элементов, потому что в элементе нетDOM, относящиеся к типу отправки (см. http://api.jquery.com/submit-selector/).. В этот момент ваш обработчик не привязывается ни к чему. Позже, когда вы нажимаете ссылку и добавляете кнопку отправки формы и дочернего элемента, он по-прежнему имеетк нему прикреплен обработчик событий по умолчанию.

Чтобы получить желаемое поведение, у вас есть две опции.

Один из них - прикрепить обработчик к кнопке отправки в обработчике $('a').click(),вместо оценки селектора во время document.ready.

Другой, как предполагает karim79, использует .live() (см. http://api.jquery.com/live/) или .delegate() (см. http://api.jquery.com/delegate/) для ленивого связывания).к элементу, который еще может не существовать.

0 голосов
/ 29 июня 2010

Я настоятельно рекомендую вам использовать JQuery DOM при добавлении / удалении объектов DOM

http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype

решение с использованием jquery DOM 

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(event){
        var submitDOM = $.FORM(({ method: "post", action: ""}, 
                            submit = $.INPUT({ type: "submit" })
                        );

        $(submit).click(function() {
            alert("click"); 
            return false;
        });

        $('div').append(submitDOM);
    }); 
});
</script>


<a href="#">Click here to add button</a>
<div>Here</div>
0 голосов
/ 29 июня 2010

Вам нужно использовать jquery live, чтобы добавить событие click.

Live: 

$(':submit').live("click", function(event){
    event.preventDefault();
    alert('click');
});
...