Jquery Rebind Нажмите, используя новый .on () вместо .live - PullRequest
Новая
       4

Jquery Rebind Нажмите, используя новый .on () вместо .live

0 голосов
/ 27 января 2012

У меня проблемы с получением нового .on click для работы с использованием 1.7.

Для динамически создаваемых ссылок, таких как ссылки, созданные с помощью кнопки «Создать», эти ссылки должны иметь ту же функцию щелчка, что и статические ссылки в DOM. 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript">

function createDivs(){
content = '<div class="tile-button"><a class="tile-action" href="#" rel="1234" alt="Open">Dynamic Link</a></div>';
$(content).appendTo("#dynamicArea");
$('.tile-action').bind('click',function(){});

}

$(document).ready(function(){
    $('#createButton').on("click", createDivs);

    $('#destroyButton').on("click", function(event){
        $("#dynamicArea").html("");
    });

    $('.tile-action').on("click", function(event){
            var linkalt = $(this).attr("alt");
            var linkrel = $(this).attr("rel");
            alert(linkalt + " " + linkrel);
            return false;
   });
});     
</script>
</head>
<body>
<button id="createButton">CREATE</button> <button id="destroyButton">Destroy :(</button>
<div id="dynamicArea"></div>

<br>
<a class="tile-action" href="#" rel="1234" alt="Open">Link</a><!-- works -->
</body>
</html>

В этом упрощенном примере моей проблемы при нажатии кнопки «Создать» появляется динамическая ссылка. Когда вы нажимаете, ничего не происходит, и эти динамические ссылки не вызывают оповещение, как статическая ссылка.

1 Ответ

6 голосов
/ 27 января 2012

on метод принимает второй аргумент в качестве селектора, по которому должно инициироваться событие, которое вы пропустили.Также корневым элементом должен быть контейнер, который будет содержать динамические элементы.В вашем случае это #dynamicArea.Попробуйте это. 

   $("#dynamicArea").on("click", ".tile-action", function(event){
            var linkalt = $(this).attr("alt");
            var linkrel = $(this).attr("rel");
            alert(linkalt + " " + linkrel);
            return false;
   });

Вы должны понимать работу on.Мы выбираем элемент #dynamicArea и используем для него метод on, передавая селектор .tile-action.jQuery будет прикреплять событие click к #dynamicArea, и всякий раз, когда любой элемент щелкается внутри #dynamicArea, событие переходит в #dynamicArea.В этот момент он попытается увидеть, совпадает ли селектор, который мы передали в качестве второго параметра on, или нет.Если он совпадает, то он запускает событие, иначе он не будет ничего делать, просто запустит событие, если мы не остановим его.

...