JQuery / Ajax - селектор не работает - PullRequest
Новая
       0

JQuery / Ajax - селектор не работает

2 голосов
/ 25 июня 2011

Когда я использую jQuery.ajax () для загрузки содержимого HTML из некоторого PHP в элемент на странице, селекторы jQuery не работают с элементами в этом загруженном HTML.

Это общая проблема или мне нужно собрать пример? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="../jquery.js" type="text/javascript"></script> 
</head>
<body>
    <div id="htmlcontent">
        <a href="#">Blah</a><br />
        <a href="#">Bleh</a><br />
    </div>
    <div id="replacecontent">
        <br /><a href="#">Replace content</a>
    </div>
    <script type="text/javascript">
        $("#htmlcontent a").click(function() {
            alert("Clicked on a link!");
        });
        $("#replacecontent a").click(function() {
            $("#htmlcontent").html('<a href="#">This doesn't alert(). Why?</a>');
        });         
    </script>
</body>

Хорошо, это не было слишком сложно. :)

Ответы [ 3 ]

4 голосов
/ 25 июня 2011

Я уверен, что ваши селекторы просто в порядке. Это, вероятно, обработчики событий, которые не связаны правильно. Вы используете .bind () или .click ()? Распространенной проблемой является то, что вы не можете использовать эти стандартные события для привязки к элементам, которые еще не существуют на странице. Возможно, вы захотите взглянуть на .live () , который прикрепляет обработчик к событию для всех элементов, которые соответствуют текущему селектору, теперь и в будущем .

Так попробуйте это: 

    $("#htmlcontent a").live('click', function() {
        alert("Clicked on a link!");
    });
3 голосов
/ 25 июня 2011

Селекторы не работают после того, как вы изменили DOM, потому что элементы, к которым они были прикреплены, будут манипулироваться или удаляться.Если вы хотите обойти это, вы должны будете использовать $.live() или $.delegate().

Это объяснение прикрепления события .live():

Метод .live () может воздействовать на элементы, которые еще не были добавлены в DOM, с помощью делегирования событий: обработчик, связанный с элементом-предком, отвечает за инициируемые событияна его потомков.Обработчик, переданный в .live (), никогда не привязывается к элементу;вместо этого .live () привязывает специальный обработчик к корню дерева DOM.

2 голосов
/ 25 июня 2011

Элементы, которые вы пытаетесь выбрать, отсутствуют в DOM во время привязки событий click().

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

    $("#replacecontent").delegate("a", "click", function() {
        $("#htmlcontent").html('<a href="#">This will work now alert(). Why?</a>');
    });

Я предпочитаю .delegate(), чем .live(), поскольку это более эффективно, что дает нам простой способ указать контекст для селектора.С .live() каждый отдельный щелчок по всему документу должен сравниваться с указанным селектором, с .delegate() только элементами в контейнере $("#replacecontent").

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...