Как применить уже запущенные сценарии jQuery к контенту, вызываемому Ajax? - PullRequest
Новая
       4

Как применить уже запущенные сценарии jQuery к контенту, вызываемому Ajax?

0 голосов
/ 26 апреля 2011

Я имею дело с этой проблемой. Я запускаю несколько скриптов jQuery на своей странице, и все работает нормально. Проблема возникает, когда я хочу применить эти скрипты к контенту, который вызывается AJAX.

Я создал пример кода, который демонстрирует проблему. Он состоит из 3 файлов - index.html, target.html и main.js

Index.html (только <body>) 

<body>

    <script type='text/javascript' src='main.js'></script>  

    <div id='main'>

        <button>Call Ajax</button>
        <br /><br />
        <a href='index.html?clicked=1'>Some link</a>

    </div>

    <div id='target'></div>

</body>

Target.html 

<a href='index.html?clicked=1'>Some link 2</a>

Main.js 

$(document).ready(function() {

    $('a').live("click", function() {
        if(!confirm('Are you sure?'))
            return false
    });

    $('button').click(function() {
        $.post('target.html', function(data) {
            $('#target').html(data);
        });
    }); 

});

Итак, скажем, я хочу, чтобы пользователь подтверждал каждый раз, когда нажимал на тег <a>. Я нажимаю на тег внутри #main <div>, и он отлично работает. Я нажимаю кнопку «Call ajax», появляется ссылка, я нажимаю на нее, и подтверждение не появляется.

Итак, я решил поместить <script type='text/javascript' src='main.js'></script> в файл target.html .

Это прекрасно работает, до того момента, когда я снова нажимаю первую ссылку (внутри #main div). Затем подтверждение появляется 2 раза вместо одного.

Я обнаружил в Интернете, что некоторые люди решают эту проблему, используя метод .live() или $(document).ajaxComplete(function(){, но я не смог его запустить.

Кто-нибудь может предоставить рабочее решение? Спасибо, Майк.

Ответы [ 2 ]

1 голос
/ 26 апреля 2011

не удалось запустить его - плохое оправдание. Вы, конечно, можете запустить его, и должны, так как это правильный способ сделать это.

попробуйте это: 

var confirmFn = function() {
        if(!confirm('Are you sure?'))
            return false
}

$('a').click(confirmFn);
$('#target').delegate("a", "click", confirmFn);
$('button').click(function() {
    $.post('target.html', function(data) {
        $('#target').html(data);
    });
});
0 голосов
/ 26 апреля 2011

Пробовали ли вы перепривязать обработчик кликов при загрузке дополнительного файла? 

var f;

$(document).ready(function() {
    $('a').live("click", f=function() {
        if(!confirm("Are you sure?")) return false;
    });

    $('button').click(function() {
        $.post('target.html', function(data) {
            $('#target').html(data);
            $('a').unbind("click").live("click", f);
        });
    });
});

Также я бы проверил консоль на наличие ошибок.

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

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

...