Проблема с селекторами & .html () в jquery?

Question

Функция, связанная с селектором, перестает работать, когда я заменяю его содержимое с помощью .html (). Поскольку я не могу опубликовать свой оригинальный код, я создал пример, чтобы показать, что я имею в виду ...

Jquery:

$(document).ready(function(){
$("#pg_display span").click(function(){
    var pageno = $(this).attr("id");
    alert(pageno);
    var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>";
    $("#pg_display").html(data);

});
});

HTML:

<div id="pg_display">
<span id="page1">1</span>
<span id="page2">2</span>
<span id="page3">3</span>
</div >

Есть ли какой-нибудь способ исправить это?

Answer 1

Не уверен, что я вас полностью понимаю, но если вы спрашиваете, почему функции .click () не работают на диапазонах, которые добавляются позже, вам нужно будет использовать .live () ,

$("#someSelector span").live("click", function(){
  # do stuff to spans currently existing
  # and those that will exist in the future
});

Это добавит функциональность любому элементу в данный момент на странице и любому элементу, который будет создан позже. Это избавляет вас от необходимости повторно подключать обработчики при создании новых элементов.

Answer 2

Вы должны повторно связать событие после замены HTML, поскольку исходный элемент DOM исчезнет. Чтобы разрешить это, вы должны создать именованную функцию вместо анонимной:

function pgClick() {
  var pageno = $(this).attr("id");
  alert(pageno);
  var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>";
  $("#pg_display").html(data);

  $("#pg_display span").click(pgClick);
}

$(document).ready(function(){
  $("#pg_display span").click(pgClick);
});

Answer 3

В вашей ситуации вы можете использовать концепцию «Делегирование событий» и заставить ее работать.

Делегирование событий использует тот факт, что событие, сгенерированное для элемента, будет продолжать пузыриться до его родителя, если нет больше родителей. Таким образом, вместо привязки события click к span, вы найдете событие click в вашем #pg_display div.

$(document).ready(
    function()
    {
        $("#pg_display").click(
            function(ev)
            {
                //As we are binding click event to the DIV, we need to find out the
                //'target' which was clicked. 
                var target = $(ev.target);

                //If it's not span, don't do anything. 
                if(!target.is('span'))
                   return;                

                alert('page #' + ev.target.id);
                var data="<span id='page1'>1</span><span id='page2'>2</span><span id='page3'>3</span>";
                $("#pg_display").html(data);

            }
         );
    }
);

Рабочая демоверсия: http://jsbin.com/imuye

Код: http://jsbin.com/imuye/edit

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

Answer 4

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

Самое простое средство - использовать новые "живые" события 1.3 .

Answer 5

Используйте метод $ ("# pg_display span"). Live ('click', function ....) вместо .click.Live (доступно в JQuery 1.3.2) будет привязываться к существующим и FUTURE совпадениям, тогда как функция click (как и .bind) привязывается только к существующим объектам, а не к новым.Вам также нужно (может быть?) Отделить данные от функции, или вы всегда будете добавлять новые теги диапазона при каждом клике.

http://docs.jquery.com/Events/live#typefn