Создать новый div динамически с JQuery и использовать его? - PullRequest
Новая
       11

Создать новый div динамически с JQuery и использовать его?

0 голосов
/ 29 декабря 2011

Я пробовал это 

$(document).ready(function(){
    var conntent = $("#conntent");
    $('#form_post').submit(function(){
        if($("#set").val() != ''){
             $.post('post.php', $("#form_post").serialize(), function(data){
                 conntent.append('<div class="item"><span>' + data + 
                 '</span></div>');
             });
        }
        $("#set").val('');
        return false;
     });    

   //Then I try to click on new the new element

        $('span').click(function(){
            alert("OK");
        });
   });

Однако, после этого я не могу использовать, нажмите на spans

Я думаю, возможно ли после добавления их, что они не являются частью DOM. Есть предложения?

Ответы [ 2 ]

2 голосов
/ 29 декабря 2011

Это код: 

$('span').click(function(){
    alert("OK");
});

работает до этот код: 

conntent.append('<div class="item"><span>' +data + '</span></div>');

Это очень большая вероятность, поскольку POST асинхронный.

Вы можете использовать jQuery's .live() или .delegate() для привязки к элементам, которые еще не были добавлены в DOM. Таким образом, когда они добавляются динамически, событие щелчка автоматически связывается с ними.

В качестве альтернативы, если вы просто хотите, чтобы этот вызов к .click(function()) происходил после POST, вы можете вызвать его в ответе, а не вне всего этого. Примерно так: 

$.post('post.php', $("#form_post").serialize(), function(data){
    conntent.append('<div class="item"><span>' +data + '</span></div>');
    $('span').click(function(){
        alert("OK");
    });
});

Лично я бы выбрал подход .delegate(), но общая структура зависит от вас. В жизни этой страницы могут быть случаи, которые вы не хотите связать, я не знаю.

0 голосов
/ 29 декабря 2011

Возможно, есть 2 возможные причины, потому что это не работает 1-й Вы пытаетесь связать событие, прежде чем «span» является частью DOM После этого решение является обязательным событием: 

conntent.append('<div class="item"><span>' +data + '</span></div>');
$('span:last').bind('click', handler);

2-й, возможно, вам следует использовать контекст, подобный этому 

$('span', conntent).bind('click',handler)

ура :)

...