Блог

Главная - Вопросы по программированию - Как применить уже запущенные скрипты jQuery к контенту, вызываемому Ajax?

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

#jquery #ajax #refresh

#jquery #ajax #обновить

Вопрос:

Я имею дело с этой проблемой. Я запускаю несколько скриптов 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> , и он работает нормально. Я нажимаю кнопку «Вызвать ajax», появляется ссылка, я нажимаю на нее, и подтверждение не отображается.

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

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

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

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

Ответ №1:

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

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

 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);
    });
});

Ответ №2:

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

 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);
        });
    });
});

Кроме того, я бы проверил консоль на наличие ошибок.