Как добавить событие клика для вновь добавленного Div в JQuery?

0

это мой html

 <div id="main">
    <div class="submit">welcome</div>
 </div>

это мой jquery

 $(".submit").click(function()
 {
     $("$main").append('<div class="submit">welcome</div>');

 });

здесь, что случилось, это работает для первого div. Это событие не работает для недавно добавленного div?

как это решить?

  • 0
    делегирование мероприятия !!!
  • 1
    $("#main").on('click', '.submit', function () { $("#main").append('<div class="submit">welcome</div>'); });
Показать ещё 1 комментарий

6 ответов

5

У вас есть два варианта делегирования (назначение обработчика щелчка, которое будет обнаружено родителем):

$('#main').on('click', 'div.submit', function(){
    // this is your click-handler
});

Или связывая обработчик кликов в точке создания элемента:

$(".submit").click(function() {
    $('<div />', {
        'class' : 'submit',
        'on' : {
            'click' : function(){
                // this is your click-handler
            }
        }).appendTo('#main');

});

Очевидно, что если у вас есть именованная функция для вызова, вы можете назначить это вместо использования анонимной функции:

$('#main').on('click', 'div.submit', namedFunctionToCall);

Или:

$(".submit").click(function() {
    $('<div />', {
        'class' : 'submit',
        'click' :  namedFunctionToCall
        }).appendTo('#main');

});

Рекомендации:

0

Вам нужно определить #, если вы используете div id like

$("#main").append();

В случае, если ваш класс использования может быть доступен. как это

$(".main").append();
0

Попробуй это

$(function(){
    $('.submit').bind('click', function (event) {
       alert("Hello");
     });
   });
0

Вы можете использовать функцию live

 $( ".submit" ).live( "click", function() {
  alert("Appended" ); // jQuery 1.3+
});
  • 0
    live() устарела в 1.7 (в пользу on() ) и удалена в 1.9 (я не обязательно критикую ваш ответ, просто отмечаю, что live() может (не может) работать в зависимости от версии JQuery используется). Также там, где доступна live() , команда jQuery рекомендует delegate() .
0

Использование делегирования событий

$("#main").on('click', '.submit', function () {
    $("#main").append('<div class="submit">welcome</div>');
});

Демо: скрипка

0

Использовать делегацию:

$("#main").on("click", ".submit", function()
{
    $("#main").append('<div class="submit">welcome</div>');
});

И заменить $ с # при выборе #main.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню