Jquery не применяется после замены HTML - PullRequest
Новая
       4

Jquery не применяется после замены HTML

0 голосов
/ 21 ноября 2011

У меня есть некоторые функции jquery, которые я вызываю из функции $ (document) .eady (), например: 

<script type="text/javascript">

$(document).ready(function(){
    $('.table_task_type tr').mouseover(function(){
        $(this).addClass("hover");
    });
    $('.table_task_type tr').mouseleave(function(){
        $(this).removeClass("hover");
    });
    $('input:checkbox').click(function() {
        $(this).parent().parent().toggleClass('checked');
    });
});
</script>

Дело в том, что я заменяю часть HTML на некоторые действия пользователя. Я делаю это так: 

$("#my_table").empty();
$("#my_table").html(data);

События jquery запускаются при первой загрузке страницы, но как только html моей таблицы заменяется, она больше не работает.

Есть ли обходной путь к этому?

Ответы [ 2 ]

1 голос
/ 21 ноября 2011

используйте jquery live method
пример: 

$('.table_task_type tr').live('mouseover',function(){
    $(this).addClass("hover");
});
0 голосов
/ 28 августа 2013

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

<div id="content">
    <div id="my_table">
        <table>
            <tr class="table_task_type">
                <td>foo</td>
                <td>bar</td>
                <td>baz</td>
            </tr>
        </table>
    </div>
</div>


$(function() {
    $('#content').on('hover', '.table_task_type', 
        function() {
            $(this).toggleClass('.rollover');
        }, 
        function() {
            $(this).toggleClass('.rollover');
        });
});

Слушатель привязан к родительскому контейнеру того, который вы переполняете. Поскольку родительский контейнер (#content) не заполняется повторно, привязка не будет нарушена. Это также быстрее, потому что событие щелчка должно всплывать только на одном узле в DOM, а не пузыриться до документа.

...